webentwicklung-frage-antwort-db.com.de

@ font-face Anti-Aliasing unter Windows und Mac

Ich habe http://www.fontsquirrel.com/ verwendet, um ein @ font-face-Kit zu erstellen.
Es funktioniert gut, aber das Ergebnis unter Windows unterscheidet sich vom Ergebnis auf Mac.
Unter Windows scheint die Schrift ein falsches Anti-Aliasing zu haben:
Font face on Mac Dies ist das Ergebnis auf einem Mac mit FF, Chrome oder Safari (alle auf die letzte Version aktualisiert).
Font face on Windows Dies ist das Ergebnis unter Windows mit FF oder Chrome. 

Wie Sie sehen, ist das Ergebnis nicht dasselbe. Unter Windows ist die Schrift dicker und rauer.
Wie kann ich das lösen?

25
pasine

Das sieht nur so aus, als würden Sie in WinXP Schriftarten normal darstellen. Einige (IMO: fehlgeleitete) Leute bevorzugen es sogar.

Um Anti-Aliasing für Desktop-Schriftarten im Allgemeinen unter XP zu erhalten, müssen Sie sie unter Eigenschaften von Anzeige -> Darstellung -> Effekte -> aktivieren. Verwenden Sie die folgende Methode, um die Kanten von Bildschirmschriftarten zu glätten -> ClearType. Die Standardeinstellung „Standard“ ist die alte Windows-Methode zum „Verwischen von Schriftarten“, die nur bei größeren Schriftgrößen aktiviert werden kann und dann oftmals ein Durcheinander verursacht.

IE7 + verfügt über eine Option (standardmäßig aktiviert), um ClearType-Anti-Aliasing immer zum Rendern von Schriftarten im Webbrowser zu verwenden. Andere Webbrowser respektieren die konfigurierte Methode zur Schriftdarstellung des Benutzers. Es ist eine Schande, dass so viele Menschen diese vorteilhafte Einstellung immer noch deaktiviert haben, aber es ist nicht wirklich Ihr Problem.

(Es gibt einen unangenehmen Hack, um Chrome per einige Anti-Aliasing auf Text auszuführen. Dies ist:

text-shadow: 0px 0px 1px rgba(0,0,0,0);

aber ich würde es ernsthaft nicht empfehlen.

Sie können etwas tun, wenn die Einstellung "Folgende Methode ... verwenden" auf "Standard" gesetzt ist. Wenn Sie versuchen möchten, die Schriftart get einige - Form des Anti-Aliasing zu erstellen, müssen Sie die Schriftart überprüfen In der fraglichen Tabelle gibt es keine GASP-Tabelle, die altmodischen TrueType-Renderern mitteilt, um das Anti-Aliasing bei bestimmten Schriftgrößen zu deaktivieren. Sie können die GASP-Tabelle mit einem Font-Editor oder mit dem Befehlszeilenprogramm ttfgasp.exe ändern.

8
bobince

Ich wurde auch auf Chrome damit geplagt und ich glaube, ich habe gerade die Antwort gefunden!

Chrome mochte das standardmäßige fontsquirrel.com-generierte CSS nicht. 

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

Um das Problem zu beheben, habe ich die SVG-Zeile verschoben:

url('/_styles/hlc/hl-webfont.svg#HLC') format('svg')

an die Spitze der Liste. Jetzt sehe ich Anti-Alias-Schriftarten! Ich denke, Chrome will zuerst sein ...

/* THIS WORKS FOR ME */
@font-face {
    font-family: 'HLC';
    src: url('/_styles/hlc/hl-webfont.eot');
    src: url('/_styles/hlc/hl-webfont.svg#HLC') format('svg'),
         url('/_styles/hlc/hl-webfont.eot?#iefix') format('embedded-opentype'),
         url('/_styles/hlc/hl-webfont.woff') format('woff'),
         url('/_styles/hlc/hl-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Ich hoffe es funktioniert auch für dich. Genießen!

48
maximo

Ich bin überrascht, dass niemand dies erwähnt hat. Das Anwenden eines leichten -webkit-Text-Strichs ist für mich der Trick, unabhängig vom Format (Erweiterung) der Schriftart, die Sie verwenden. Einige empfehlen einen -webkit-Text-Strich: 1px, aber für mich ändert sich die Schriftart zu stark (macht sie zu stark). Aber ein 0.5px-Bild macht den Schlaganfall fast unbemerkt und aktiviert das Antialiasing:

-webkit-text-stroke: 0.5px;

Fügen Sie es in Ihre CSS-Definition für HTML-Tag ein und fertig!

14
Pere

Es gibt auch eine Schriftart namens Vegur, die wie Myriad Pro aussieht, aber legal in eine Website eingebettet werden kann. Hoffe, das hilft!

4

Ich habe ein wenig recherchiert und einen Hack gefunden, von dem ich denke, dass er einen Unterschied macht. Fügen Sie dies in Ihr CSS mit Ihren Schriftvariablen ein:

-webkit-transform: rotate(-0.0000000001deg);

Ich finde auch, dass ein Full-on-Black (#000000) auch keine Rolle spielt. Mit einem sehr dunklen schien mir zu helfen.

3
Sparky

Das Ändern von Einstellungen in Windows oder eines Browsers selbst ist keine Lösung. Wenn Sie @font-face verwenden, soll die Schrift auf jedem Bildschirm in jedem Browser schön aussehen, nicht nur in Ihrem.

Der Trick mit

text-shadow: 0 0 1px rgba(255,255,255,0.1);

oder

-webkit-transform: rotate(-0.0000000001deg);

funktioniert in Chrome 16.0.912.63 m unter Windows Vista nicht mehr.

Ich konnte jedoch keinen Weg finden, um dieses Problem zu überwinden.

2
Lubo Zviera

Dies ist ein Code, der zum Beheben des "Chrome-Rendering-Problems" verwendet wird:

@font-face {
    font-family: 'fontname';
    src: url('fonts/fontname.eot');
    src: url('fonts/fontname.eot') format('embedded-opentype'),
    url('fonts/fontname.svg') format('svg');
}

/*if mozilla*/
@-moz-document url-prefix() { 
    @font-face {
        font-family: 'fontname';
        src: url('fonts/fontname.ttf') format('truetype');
    }
}

:) es funktioniert für mich ... ENDLICH!

2
apofiSSo

-webkit-transform: drehen (-0.0000000001deg);

Update: Funktioniert nicht mehr in Chrome 15.0.874.106 m. Obwohl es funktioniert in IE9 und Firefox -> Zequez 4. November um 15:28

UPDATE: Dies funktioniert (zumindest für mich) in Chrome 15.0.874.121 m.

IE9 und Firefox sollten es nicht brauchen oder von diesem anvisiert werden, da der Selektor -webkit- angibt.

0
Matt Williams