it-swarm.com.de

Problem beim Rendern von Schriftarten

Ich habe festgestellt, dass es bei einer Site, an der ich arbeite, Probleme gibt, wie Schriftarten in verschiedenen Browsern/Betriebssystemen gerendert werden. Ich verwende Cantarell von Google Web Fonts, Größe 16px, es kommt darauf an. Hier ist ein Screenshot.

Firefox Ubuntu, gut:

enter image description here

Firefox WinXP, gut:

enter image description here

Chrome WinXP, schlecht:

enter image description here

IE WinXP, schlecht:

enter image description here

Ich kann versichern, dass sich das Problem auf einer Textseite sehr deutlich bemerkbar macht. Warum ist das passiert? Irgendein Trick, um das Problem zu beheben?

- BEARBEITEN:

Ich möchte das Problem verdeutlichen: Wenn Sie in Chrome und IE den Teil € 500 stats genau betrachten, werden Sie falsche Pixel sehen, die die Schrift wirklich hässlich machen.

6
Paolo

Bei einfachem Text können Sie nicht garantieren, dass die Schriftwiedergabe pixelgenau ist. Wenn Sie sich Sorgen darüber machen, wie der Text für einige Benutzer aufgrund von Rendering-Artefakten aussieht, sollte es an diesem Punkt dem Benutzer überlassen sein, sein eigenes System zu reparieren. Natürlich, da wir uns nicht darauf verlassen können, dass sie auch nur wissen, wie man das macht, geschweige denn, wenn Sie immer noch die Pixel-Perfektion sicherstellen wollen, müssen Sie eine Alternative für Schriftarten verwenden.

Selbst die Verwendung moderner Funktionen wie CSS3 @ font-face und Canvas-Rendering kann das Problem nicht lösen, da sie immer noch unterschiedliche zugrunde liegende Schriftbibliotheken pro Betriebssystem-/Browserkombination verwenden.

Sie können eine Hilfeseite bereitstellen, auf der Benutzer erfahren, wie sie ihre Einstellungen für die gängigsten Betriebssysteme/-einstellungen ändern können. Die meisten Benutzer werden sich jedoch nicht darum kümmern.

Die einzig praktikablen Optionen sind das Ersetzen von Flash oder das Erstellen von Bildern auf dem Server. Weder ist sehr zugänglich, und der Flash-Ersatz ist keine Lösung für einige mobile Browser. Ich würde davon abraten, obwohl sie funktionieren können, wenn die Pixel-Perfektion für Sie wichtiger ist als die geräteübergreifende Zugänglichkeit oder Verfügbarkeit.

Ich persönlich bin der Meinung, dass es keine Alternativen gibt, es sei denn, es bricht das Layout ernsthaft oder ist „unlesbar“. Machen Sie es für die meisten Ihrer Benutzer anständig genug. Der Rest wird sich mit Artefakten und Schriften befassen müssen. und da diese Benutzer genau die gleichen Probleme bei der Schriftwiedergabe bei allen anderen auf ihrem System feststellen, bemerken sie dies ohnehin nicht einmal.

3
Mufasa

Ich habe eine Ahnung (irgendwie). Das schlechte Verhalten hängt davon ab, welche Methode zum Glätten der Kanten von Bildschirmschriften verwendet wird. Wenn Sie daran interessiert sind, wie Sie auf diese Einstellung zugreifen können, lesen Sie Wie erhalte ich ClearType? .

Diese Einstellung wirkt sich auf alle Aspekte des Betriebssystem-Renderings aus, nicht nur im Browser. Mögliche Werte für diese Einstellungen sind:

  1. Deaktiviert (Schriften sind wirklich schrecklich)
  2. Standard (besser aber immer noch nicht akzeptabel)
  3. ClearType (sieht gut aus)

Das Problem ist, dass es sich nicht um Einstellungen handelt, die wir (Webentwickler) ohne Benutzereingriff leicht ändern können.

Ich fand einen interessanten Artikel das Problem mit einer möglichen Lösung zu erklären, aber eigentlich ist es nicht so nützlich, weil die vorgeschlagene Methode nur herausfinden kann, ob eine Art von Schriftglättung aktiv ist oder nicht. Wenn auch zwischen Standard und ClearType unterschieden werden könnte, könnten bei Bedarf dedizierte CSS-Klassen mit Ersatzschriftarten hinzugefügt werden. Aber das tut es nicht.

Irgendwelche weiteren Vorschläge?

3
Paolo