it-swarm.com.de

Chrome svg-Font-Rendering unterbricht das Layout

Ich arbeite gerade an einem kleinen Projekt, in dem ich webfonts via @fontface verwenden möchte.

Ich habe die Schrift so implementiert:

@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;

Wie Sie wahrscheinlich bereits erlebt haben, hat Chrome Probleme mit der Darstellung dieser Schriftarten auf eine reibungslose Weise.

Chrome font rendering problems

Nach einiger Suche habe ich eine Lösung gefunden, die scheinbar funktioniert: Sie verschieben einfach diesen Teil der CSS:

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

So landest du damit:

@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;

Nun rendert Chrome die Schriftarten problemlos, was großartig ist.

ABER:

Aus irgendeinem Grund bricht dieses SOMETIMES das Layout. Bei jedem dritten Laden der Seite bekomme ich ungefähr so ​​etwas:

Chrome Font problems

Alles ist nach links verschoben. Längere Texte brechen aus ihren Behältern aus. Sieht wirklich komisch aus.

** Hat jemand dieses Problem schon einmal erlebt?

Gerne würde ich mich hierzu beraten lassen. **

Fühlen Sie sich frei, sich selbst ein Bild zu machen: Fireflycovers.com online anzeigen

Danke vielmals!

29
Arrowcatch

Ich habe genau dieses Problem mit einer eigenen Website passieren lassen.

Behalten Sie anstelle der SVG-Datei die ursprüngliche Formatierung bei, fügen Sie jedoch eine Medienabfrage hinzu (siehe unten). Auf diese Weise wird Chrome die Schriftarten perfekt rendern und das Layout bricht.

@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
Quka

Ich habe die gleichen Probleme (oder noch schlimmer) bei einigen Websites gesehen. Meistens wird der Text auf sich selbst zertrümmert.

Meine einzige Lösung an diesem Punkt ist, auf die ältere Schriftart zurückzugreifen. Sie können auch versuchen, die CSS-Regel hinzuzufügen: -webkit-font-smoothing: antialiased; für eine kleine Verbesserung.

2
Khan

Das Update befindet sich in der Duplizierung der @font-face-Regel.

In einer Medienabfrage in der Quka-Antwort ist dies nicht unbedingt erforderlich. Dies ist jedoch eine gute Methode, um nur Webkit-Browser zu verwenden.

Wenn Sie Ihre @font-face-Deklaration genau wie (svg zuerst für besseres Rendern) duplizieren und unterhalb des Originals einfügen, sind die funky Layout-/Draw-Probleme weg. 

Es ist nur wichtig, dass die Medienabfrage hier nicht wichtig ist, sondern die duplizierte Regel. Das ist so ein komischer Fehler. So dumm.

0
Dan Tello