it-swarm.com.de

@ font-face für benutzerdefinierte Schriften, Schriften in Chrome nicht glatt

Ich habe eine Webanwendung, die CSS3 @ font-face verwendet, um benutzerdefinierte Schriftarten einzubetten. Bisher funktioniert das in IE und Firefox einwandfrei. 

In Chrome werden die benutzerdefinierten Schriftarten jedoch pixelig und nicht glatt dargestellt. Unten ist ein Link zu einem Bildschirmausschnitt eines Beispiels meiner Schriftart in Firefox & IE (oben) und Chrome (unten): Screenshot-Vergleich

Es kann schwierig sein, den Unterschied in einem so kleinen Beispiel-Screenshot zu erkennen, aber wenn dies auf der gesamten Seite passiert, ist das sehr deutlich. 

Im Folgenden finden Sie ein Beispiel für die Verwendung von @ font-face in meinem Stylesheet:

@font-face 
{
    font-family: 'MyFont';
    src: url('../Content/fonts/MyFont.eot?') format('embedded-opentype'),
         url('../Content/fonts/MyFont.ttf') format('truetype');
}

Eine andere Sache, die möglicherweise erwähnenswert ist, ist, dass die Schriftarten, wenn ich die Site in einem beliebigen Browser auf einer VM herunterlade, SUPER abgehackt sind, viel schlimmer als das Chrome-Beispiel. Dies geschieht, wenn ich einen meiner Schulcomputer verwende, auf denen alle Win7 VMWare-Desktops ausgeführt werden. Es passiert auch, wenn ich die Site von einem Windows 7 VM auf dem Mac eines Freundes abrufe. 

18
Danny

Dies ist ein bekanntes Problem, das von Chrome-Entwicklern behoben wird:

http://code.google.com/p/chromium/issues/detail?id=137692

So umgehen Sie den ersten Versuch:

html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

Wenn dies für Sie nicht funktioniert, funktionierte diese Problemumgehung für mich (oben wurde Windows Chrome nicht behoben):

http://code.google.com/p/chromium/issues/detail?id=137692#c68

es sieht so aus, als würde die CSS-Regel @ font-face neu angeordnet, damit svg 'first' erscheint, um dieses Problem zu beheben.

beispiel:

-before--------------

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


-after--------------

@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.svg') format('svg'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
34
Evan

Leider stellen alle Browser Schriftarten unterschiedlich dar. Und einer, der in einem gut aussieht, könnte in einem anderen Probleme haben. Es ist nicht so einfach, eine gute Schriftart für Schriftbild zu finden. Wenn Sie Pixel-Perfektion wünschen, müssen Sie Bilder verwenden. 

Aber nicht alles ist verloren, hier sind 20 kostenlose Schriftarten (sogar für kommerzielle Zwecke kostenlos!), Die recht gut wiedergeben (ich ende am Ende immer diese Liste): http://speckyboy.com/2010/07/04/25 -komplette-freie-Schriftarten-perfekt für-Font-Schnittstelle/

Denken Sie daran, dass Sie keine bezahlten Zeichensätze hosten können, da Sie sie verteilen und in Schwierigkeiten geraten könnten.

3
Yisela

Möglicherweise möchten Sie mit OptimizeLegibility spielen: http://aestheticallyloyal.com/public/optimize-legibility/

Und auch -webkit-font-smoothing: http://maxvoltar.com/archive/-webkit-font-smoothing

Es kann sich auch lohnen, den font-squirrels-Fontgenerator zu verwenden, um Ihre Webfonts und css zum Laden der Fonts zu generieren: http://www.fontsquirrel.com/fontface/generator (obwohl ich nicht sicher bin, ob das Ihr Problem beheben wird oder nicht)

1
13twelve

Versuchen Sie, -webkit-transform hinzuzufügen: translateZ (1px); oder eine andere 3D-Transformation.

erläuterung:

Chrome hat einen weiteren fehlerhaften Text, wenn 3D-Transformationen angewendet werden. Durch das Hinzufügen der vorgeschlagenen Eigenschaft wird der geschnittene Text unscharf und das Problem teilweise gelöst. Es ist immer noch etwas verschwommen, aber in vielen Fällen ist es besser als gehackte. 

beispiel1 (Problem): gehackter Text . Ich habe hier Rotation hinzugefügt, um sicherzustellen, dass Text gehackt wird.
Beispiel 2 (gelöst): halbglatter Text . Durch die Anwendung der 3D-Transformation wird Text verschwommen, sodass gehackter Text glatter erscheint.

Das kleine Problem ist, dass wir anscheinend nicht nur Windows-Versionen von Chrome in CSS anvisieren können. Daher müssen wir Javascript verwenden, um die entsprechende Klasse anzuwenden.

0
sol0mka

Ich würde vorschlagen, dies zu verwenden:

-webkit-text-stroke: 0.3pt;
-webkit-font-smoothing: antialiased;
0
Cas Bloem
0
moettinger

Für mich am besten gearbeitet:

@font-face {
    font-family: MyFont;
    src: url("MyFont.ttf") format('truetype');
}

h1 {
    font-family: MyFont;
    -webkit-text-stroke: 0.5pt;
    -webkit-font-smoothing: antialiased;
}
0
Tires