@ font-face Svg funktioniert nicht richtig in Chrome?

Question

Ich habe ein Problem mit einer bestimmten Schriftart und der Art, wie sie in Chrome wiedergegeben wird.

Firefox zeigt die Schriftart ordnungsgemäß aufgrund der Verwendung von ttf.

Chrome verwendet keine Antialias und die Schriftart ist zu "scharf" und hässlich.

Dies ist die CSS-Deklaration I

verwendet

@font-face { 
    font-family: 'HelveticaNeueLT Std Thin'; 
    src: url(../fonts/h2.eot); 
    src: url(../fonts/h2.svg#test) format('svg'), 
     url(../fonts/h2.woff) format('woff'), 
     url(../fonts/h2.ttf) format('truetype'); 
font-weight: normal; 
font-style: normal; 
} 

ich zu dem Schluss gekommen, dass das Problem mit der Datei svg Erklärung/font ist. Wenn ich das Hash-Tag überhaupt nicht verwende und es nur als .svg belasse, wird es in einer anderen Zeilenhöhe gerendert, aber leicht versetzt. Wenn ich .svg # irgendetwas hinzufüge, antialiasiert es überhaupt nicht und sieht hässlich aus.

Irgendwelche Vorschläge sind willkommen, um mir zu helfen, dieses ziemlich lästige Problem zu beheben.

PS: Windows Antialiasing ist in Ordnung, ich habe das getestet. Ich habe auch die @media screen and (-webkit-min-device-pixel-ratio:0) Deklaration nur für die SVG-Schriftart ausprobiert, ohne Erfolg. Ich weiß, dass dies ein Repost sein kann, aber nachdem ich alle Lösungen aus den verwandten Fragen ausprobiert habe, bin ich ein bisschen verzweifelt.

Answer 1

Webfonts mit gutem Anti-Aliasing in Chrome unter Windows zu machen, um zu bekommen, müssen Sie dieses Format in der Schriftart Deklaration verwenden:

@font-face { 
    font-family: 'Futura'; 
    src: url('futura.eot'); 
    src: url('futura.eot?#iefix') format('embedded-opentype'), 
     url('futura.woff') format('woff'), 
     url('futura.ttf') format('truetype'), 
     url('futura.svg#futura') format('svg'); 

    font-weight: normal; 
    font-style: normal; 
} 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    @font-face { 
     font-family: 'Futura'; 
     src: url('futura.svg#futura') format('svg'); 
    } 
} 

Grundsätzlich müssen Sie Chrome zwingen, das SVG-Font-Format zu verwenden. Sie können dies tun, indem Sie die URL für die .svg-Version nach oben verschieben. Chrome unter Windows hatte jedoch Probleme mit dem Layout (bis einschließlich Version 30). Durch das Überschreiben der Schriftartdeklaration mithilfe einer Medienabfrage werden diese Probleme gelöst.

Außerdem: Manchmal stimmt die Grundlinienposition nicht zwischen OpenType-Schriftarten und SVG-Schriftarten überein, aber Sie können dies anpassen, indem Sie einfach die SVG-Schriftartendateien bearbeiten. SVG-Fonts sind XML-basiert und wenn man sich die Erklärung aussehen

<font-face units-per-em="2048" ascent="1900" descent="-510" /> 

Sie können den Wert für den Aufstieg ändern und bekommen es die anderen Schriftformat Versionen übereinstimmen.

Answer 2

Font Squirrel's webfont generator ordnet ihre @font-face CSS wie folgt aus:

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

Weitere Informationen darüber, warum die Reihenfolge hier wichtig ist: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Wenn es immer noch hat man Mühe geben, versuchen, die oben genannten Generator verwenden, die wählen EXPERT-Option, und spielen Sie mit den verschiedenen Einstellungen (vor allem unter Rendering und X-Höhe).

Answer 3

Beim Verweisen auf SVG-Dateien in @ font-face gibt die ID (#) im Dateipfad das Element in der .svg-Datei an. Um die richtige ID zu finden, können Sie sie in einem Editor öffnen und das Tag <font> überprüfen.

Zum Beispiel:

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

betrifft:

<font id="latobold" horiz-adv-x="1187" >

Answer 4

versuchen, diese @ font-face Implementierung

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

h1 { 
    font-family: 'OpenSans'; 
    font-weight: 300%; 
} 

für weitere Informationen lesen Sie in diesem Beispiel https://github.com/ttibensky/BulletProof-font-face-implementation

Answer 5

Wie Lily and font squirrel vorschlagen, sollte Ihre SVG-Schriftart fast immer am Ende Ihrer Liste von @font-face Quellen stehen. Sie möchten nicht, dass ein Browser eine SVG-Schriftart verwendet, es sei denn, sie kann nichts anderes verwenden.

Der Grund dafür ist, dass SVG-Fonts sehr schlecht unterstützt werden, und die Unterstützung sinkt. Ab diesem Beitrag (2015), SVG-Fonts sind no longer supported by Chrome (38) und werden nur von Safari 8, iOS Safari 8.1 und die Android-Browser 37. http://caniuse.com/#feat=svg-fonts

bearbeiten unterstützt: Ab Februar 2016, Android Browser 47 nicht mehr unterstützt SVG Schriftarten. Safari und iOS Safari unterstützen sie immer noch und scheinen die einzigen Browser zu sein, die dies tun.