Links ist firefox 4, rechts ist chrome 12. Gibt es eine Möglichkeit, Chrome dazu zu bringen, schönere Schriftarten zu rendern?
Das obige Bild wurde unter Windows XP aufgenommen. Unten ist ein weiteres Beispiel von Windows 7.
Überprüfen Sie die ClearType-Einstellungen - der Chrome-Screenshot sieht so aus, als ob er gezwungen wird, nicht-anti-aliased zu rendern. Das tötet so ziemlich jede Web-Schriftart, da sie keine monochromen Hinweise haben (u. a. aus Gründen der Größe). Früher wurde dies als “IE rendert Text besser” gemeldet, weil er die ClearType-Einstellungen auf Betriebssystemebene ignoriert und standardmäßig aktiviert.
All diese Antworten sind falsch! Dies ist ein großer Fehler in Google Chrome, bitte lesen Sie den offiziellen Fehlerbericht/Thread mit vielen Screenshots hier: Offizieller Fehlerbericht zu Chrome Code
Der beste Workaround ist derzeit, dem Element/der Überschrift einfach diese einfache Regel zu geben:
-webkit-text-stroke: 1px
Zusatz von Dr. John: Ich habe einen Vorschlag gefunden, dass html { -webkit-text-stroke: 0.25px} auch funktionieren würde - gefunden hier https://groups.google.com/forum/?fromgroups#!topic/mathjax-users/dV_TmJ1QMO4
Chrome liest Ihre ClearType-Einstellung, die unter Windows XP standardmäßig ausgeschaltet ist.
Um das Problem zu beheben, schließen Sie zunächst den Chrome-Browser.
Klicken Sie nun mit der rechten Maustaste auf eine beliebige Stelle des Desktops und wählen Sie “Eigenschaften” aus dem Dropdown-Menü.
Klicken Sie auf die Registerkarte “Erscheinungsbild”, die sich oben im neuen Fenster befindet.
Und klicken Sie auf die Schaltfläche “Effekte”.
Die zweite Option unten sollte lauten: “Verwenden Sie die folgende Methode, um die Ränder der Bildschirmschriftarten zu glätten.”
Wählen Sie die Option “ClearType”.
Klicken Sie auf “Übernehmen” und öffnen Sie den Chrome-Browser erneut.
Von nun an rendert Chrome Ihre Schriften mit einem schönen Anti-Aliasing für einen glatten Effekt.
Platzieren Sie die SVG-Datei höher in der font-face css-Regel, entweder 1. oder 2. zum Beispiel:
@font-face {
font-family: 'gothbook';
src: url('fonts/gothamrnd-book-webfont.eot');
src: url('fonts/gothamrnd-book-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/gothamrnd-book-webfont.svg#GothamRoundedBookRegular') format('svg'),
url('fonts/gothamrnd-book-webfont.woff') format('woff'),
url('fonts/gothamrnd-book-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Statt:
@font-face {
font-family: 'gothbook';
src: url('fonts/gothamrnd-book-webfont.eot');
src: url('fonts/gothamrnd-book-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/gothamrnd-book-webfont.woff') format('woff'),
url('fonts/gothamrnd-book-webfont.ttf') format('truetype'),
url('fonts/gothamrnd-book-webfont.svg#GothamRoundedBookRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Beispiele für diese Lösung sind hier zu sehen: FontSpring Beispiele Adtrak Beispiele
Haben Sie die GPU-Beschleunigung in Google Chrome aktiviert? Geben Sie about:flags ein und suchen Sie nach GPU Accelerated Canvas 2D, deaktivieren Sie es, wenn es aktiviert ist. Schriften auf einigen Websites erscheinen wirklich zackig, wenn ich mit aktivierter Beschleunigung gesurft habe.
Klicken Sie in Google Chrome auf den Schraubenschlüssel > Optionen > Unter der Haube > [neben Webinhalt] auf Schriftarten anpassen.
Ändern Sie die Einstellungen so, dass Ihre Seite genauso aussieht wie meine
Klicken Sie dann auf das x, und sehen Sie, ob Ihr Problem behoben ist.
Wenn dies das Problem nicht behebt, gibt es vielleicht noch eine weitere Sache… aber ich warte, bis Sie das ausprobiert haben.
Chrome nimmt den Systemwert clearType für Schriftarten. Unter Windows 7 sieht es besser aus, was das erklärt. Auf einem Mac ist Anti-aliasing für alle Schriften über Größe 8 aktiviert, nehme ich an. Versuchen Sie Einschalten oder ändern Sie den clearType Ihres Windows-Rechners
Update : Es scheint, dass Chrome 22 und höher die Systemeinstellungen für clearType ignorieren.
Ich hatte genau das gleiche Problem, das Rendern von Webfonts von http://www.google.com/webfonts in Chrome. Ich habe alle Vorschläge auf dieser und ein paar anderen Seiten ausprobiert und keiner davon hat funktioniert.
Schließlich begann ich, die CSS-Eigenschaften des betroffenen Textes zu untersuchen, und es stellte sich heraus, dass das Problem durch die tatsächliche Schriftfarbe verursacht wurde. Ein Titel, der mit color:#454545 versehen war, wurde schlecht gerendert, während derselbe Titel mit der folgenden Farbe funktionierte: color:#333 funktionierte gut. Gott sei Dank für User-Agent-spezifische Stylesheets!
Chrome rendert Web-Fonts im Moment nicht gut. Es gibt mehrere Bugs auf ihrem Issue Tracker für dieses Problem. Bitte markieren Sie alle für Sie relevanten, um ihnen mehr Aufmerksamkeit zu schenken.
Bei mir war es nicht die ClearType-Einstellung in Windows 10.1 x64, sondern es stellte sich heraus, dass es eine Einstellung in meinem Chrome-Browser namens DirectWrite war.
chrome://flags/#directwrite Das hat das Problem für mich behoben.
Ich hatte dieses Problem unter Windows XP SP3 so stark, dass es Chrome im Grunde unbrauchbar machte. Ich bemerkte, dass ich Clear Type Tuning in der Systemsteuerung installiert hatte und versuchte, das Häkchen bei “Schriftglättung aktivieren” in der erweiterten Registerkarte zu entfernen. Nach einem Neustart von Chrome. war alles in Ordnung, auch nachdem ich die Schriftglättung wieder eingeschaltet hatte. Ich entschied mich, das Kästchen “Alle Einstellungen auf Standardwerte für neue Benutzer und System anwenden” zu aktivieren.
Gehen Sie zu chrome://flags/ (oder about:flags) und Deaktivieren Sie die Option Software-Rendering-Liste außer Kraft setzen.
Beschleunigte 2D-Leinwand sollte ebenfalls deaktiviert sein.
Diese Kombination hat mir geholfen.
Drücken Sie die Windows-Taste + r und geben Sie dann cttune.exe ein
Alternativ können Sie auch die Windows-Taste drücken und dann cleartype eingeben. Wählen Sie dann Adjust ClearType Text
und folgen Sie den Anweisungen, wenn Sie immer noch Probleme haben, versuchen Sie einige der anderen Beispiele
Das hat bei mir funktioniert, Sie müssen die verschiedenen Beispiele ausprobieren, es ist ähnlich wie die Kalibrierung des Kontrasts/der Helligkeit, aber stattdessen für Text
FYI: Das Deaktivieren der 2D-Beschleunigung könnte helfen, Chrome dazu zu bringen, mit dem Windows Cleartype Tune-Tool zu spielen
Es sieht so aus, als ob die lange und harte Antwort ist, dass man es nicht kann. Es gibt viele Diskussionen und Vorschläge in der Chrome-Hilfe , aber ich sehe nichts, was einen Vorschlag wert wäre.
Die große Frage ist, wie bekommen Sie es hin, dass es so schlecht aussieht?! Ich benutze Chrome, um in dieses Feld zu tippen… Ich habe sogar ein ganzes Stück reingezoomt und sehe nichts, was so aussieht wie bei Ihnen. Wenn Sie danach noch Fragen haben, sollten Sie der Community Ihre Konfiguration erklären.
Obwohl Chrome für die Schriften “brauchbar” ist, sieht er vor allem bei der Darstellung von diagonalen Linien dünn und ausgewaschen aus. IE rendert viel besser, aber IE ist ein langsamerer Browser und FireFox auch.
Ich glaube, dass dies im Code von Chrome enthalten ist.
BTW, HackToHell, wo kann ich die Rendering-Farbe ändern?
Ich werde es versuchen.
Wenn Sie möchten, dass Web-Schriften lesbar sind, während die Schriftglättung/Cleartype deaktiviert ist, dann besteht die Lösung darin, Web-Schriften in Google Chrome zu deaktivieren. In diesem Fall verwendet der Browser die OS-Standardschriftarten, die bei deaktivierter Schriftglättung korrekt gerendert werden. Dazu übergeben Sie das Flag /disable-remote-fonts an chrome.exe. Klicken Sie auf die Google Chrome-Verknüpfung auf dem Desktop, wählen Sie Eigenschaften, gehen Sie zur Registerkarte Verknüpfung und setzen Sie das Ziel auf:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" /disable-remote-fonts
Es kann ein Problem mit deaktivierten Webfonts geben. Wenn eine Website Symbole aus Webfonts verwendet, werden diese nicht angezeigt.
Das entsprechende Problem im Chromium-Tracker:
“System-wide ClearType setting not respected for web fonts https://code.google.com/p/chromium/issues/detail?id=319429