Chrome svg-czcionka-Rendering łamie układ

Obecnie pracuję nad małym projektem, w którym chciałbym użyć webfonts poprzez @fontface .

Zaimplementowałem czcionkę tak: 

@font-face {
    font-family: 'CardoRegular';
    src: url('../fonts/Cardo104s-webfont.eot');
    src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Cardo104s-webfont.woff') format('woff'),
         url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
         url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

Teraz, Jak zapewne doświadczyłeś Chrome ma problemy z wyświetlaniem tych czcionek w płynny sposób.

Problemy z renderowaniem czcionek Chrome

Po kilku poszukiwaniach znalazłem rozwiązanie, które wydaje się działać: po prostu przenieś tę część css: 

    url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');

Więc kończysz z tym: 

@font-face {
    font-family: 'CardoRegular';
    src: url('../fonts/Cardo104s-webfont.eot');
    src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg'),
         url('../fonts/Cardo104s-webfont.woff') format('woff'),
         url('../fonts/Cardo104s-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

Teraz Chrome renderuje czcionki w gładki sposób, co jest świetne.

Ale:

Z jakiegoś powodu to czasami łamie układ. Mniej więcej za każdym razem, gdy wczytam stronę, dostanę coś takiego:

Problemy z czcionką Chrome

Wszystko jest przesunięte w lewo. Dłuższe teksty wybijają się z kontenerów. Wygląda naprawdę dziwnie.

**Czy ktoś wcześniej doświadczył tego problemu?

Z przyjemnością uzyskam Radę w tej sprawie.** / Align = "left" / : widok Fireflycovers.com online

Wielkie dzięki!

Author: Arrowcatch, 2012-12-03
Source

3 answers

Miałem dokładnie ten problem z własnej strony internetowej.

Zamiast umieszczać svg na górze, zachowaj oryginalne formatowanie, ale dodaj Zapytanie o media, jak pokazano poniżej. Dzięki temu chrome idealnie renderuje czcionki i naprawia łamanie układu.

@font-face {
   font-family: 'CardoRegular';
    src: url('../fonts/Cardo104s-webfont.eot');
    src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Cardo104s-webfont.woff') format('woff'),
         url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
         url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'CardoRegular';
        src: url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');

    }
}
 78
Author: Quka,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-15 19:27:23

Widziałem te same problemy (lub gorsze) na kilku stronach. Przez większość czasu tekst jest rozbijany ze sobą.

Moim jedynym rozwiązaniem jest powrót do starszej czcionki. Możesz również spróbować dodać regułę CSS: -webkit-font-smoothing: antialiased; dla małej poprawy.

 2
Author: Khan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-04 21:07:17

Poprawka znajduje się w dublowaniu reguły @font-face.

Niekoniecznie potrzebujesz go w zapytaniu o media w odpowiedzi Quka, chociaż jest to dobry sposób, aby kierować tylko przeglądarki webkit.

Jeśli zduplikujesz deklarację @font-face dokładnie tak, jak (najpierw svg dla lepszego renderowania) i wkleisz ją pod oryginałem, problemy z układem/rysowaniem znikną.

Po prostu wołanie, że Zapytanie o media nie jest tutaj ważne-to zduplikowana reguła. To taki dziwny robak. Takie głupie.

 0
Author: Dan Tello,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-15 13:36:46