Schlechte Font-Rendering für QuickSand (Google-Schriftart) in Chrome und IE

Ich habe gekämpft, um konsistente und gut aussehende Schriftarten über alle Browser mit der QuickSand Google Schriftart zu erhalten. Chrome und IE zeigen sehr zackige und pixelige Kanten, besonders bei kleineren Schriftgrößen. Wenn Sie den Browser zoomen, werden die Artefakte oft verschwinden.Schlechte Font-Rendering für QuickSand (Google-Schriftart) in Chrome und IE

Hier ist ein Screenshot-Vergleich der Ausgabe mit Firefox, Chrome, & Internet Explorer: https://dl.dropboxusercontent.com/u/29865983/imagehost/jsfiddle/QuickSandFont.png

Hier ist ein jsfiddle das Problem für Experimente reproduzieren:

http://jsfiddle.net/vXd2F/

#main-nav ul li a, #main-nav ul li a:link, #main-nav ul li a:active { 
color: white; 
display: inline-block; 
padding: 19px 10px; 
font: 400 12px/14px 'Quicksand', Helvetica, Arial, sans-serif; 
text-transform: uppercase;}

Quelle

2013-05-05 Mark1270287

Das Problem lag daran, dass Google Fonts nicht alle Schriftdateitypen implementiert hat. Die Lösung bestand darin, den Font-Eichhörnchen-Web-Font-Generator zu verwenden, um die fehlenden Dateitypen zu generieren und sie selbst zu hosten.

Quelle

2013-05-06 02:55:26 Mark1270287

Hallo Markus, ich habe genau das gleiche Problem - würde es Ihnen etwas ausmachen, Ihre Lösung und die generierten Dateien zu teilen? Vielen Dank! – Nils

Habe einen halben Tag damit verbracht, eine Lösung zu finden, bis ich Marks Lösung gefunden habe. Gehen Sie einfach auf http://www.fontsquirrel.com/tools/webfont-generator und laden Sie eine beliebige Schriftartdatei hoch, die Sie haben. Laden Sie das Webfontkit herunter und im Kit ist stylesheet.css. Sie können auf die stylesheet.css in Ihrem Abschnitt verweisen. Ich hatte Probleme beim Rendern der Schriftart in Safari, aber nicht in Chrome oder IE, weshalb ich diese Lösung anfangs nicht finden konnte. Vielen Dank für das Posten. Hat mir eine Menge Kummer gerettet. – Francis

Sie kann nicht zu viel mit dem Font Rendering auf den Browsern tun. Sie können es mit font-face versuchen, wenn es das besser macht, aber sonst kann es nicht geändert werden.

Für webkit (Chrome, Safari) können Sie hinzufügen:

-webkit-text-stroke: 1px black;

Um das Problem ein wenig zu maskieren, aber der Text-Ticker werden.

Quelle

2013-05-05 17:42:03 drip

Danke für die Hilfe. Ich habe mich schließlich mit dem eingebetteten Font-Face-Code beschäftigt, den die Google-Schriftart geladen hat, und es stellte sich heraus, dass es nur eine Verknüpfung mit dem .woff-Schriftformat gab. Ihre Implementierung dieser Schriftart enthielt keine .eot, .ttf oder .svg zur Unterstützung aller Browser. Ich habe font squirrel verwendet, um die fehlenden Dateien zu generieren und jetzt sieht es in Chrome und IE viel besser aus. – Mark1270287

Schlechte Font-Rendering für QuickSand (Google-Schriftart) in Chrome und IE

Antwort

Verwandte Themen