Unter Windows geladene Schriftarten sehen wirklich schlecht aus. Welche Schriftarten verwenden Sie, die besser rendern?

27

BEARBEITEN : Das Problem war, dass ich in meinen Einstellungen unter Vista nicht "Cleartype" aktiviert hatte. Diese Frage hat möglicherweise keine große Bedeutung, wenn Cleartype unter Windows installiert / aktiviert ist.

Ein neuer Typografie-Wind ist im Web angekommen, mit der Eigenschaft font-face von CSS3 können andere Schriftarten als das Betriebssystem / System-Set geladen werden. Mein Mac kann viele perfekt rendern, während mein Windows-Computer dies nicht kann. Welchen Zeichensatz soll ich verwenden, der unter Windows besser rendert?

Dies ähnelt einer Frage zum Stapelüberlauf.

Und hier ein Beispiel für eine Website, die auf einem PC mit Myriad Pro schlecht gerendert aussieht: http://css-tricks.com/

HINWEIS: Ich spreche nicht über den Unterschied beim Antialiasing zwischen Browserversionen (wie zwischen IE9 und IE6).

Als Antwort erwarte ich von Ihren Tests eine Liste von Schriften plus der Größe (bitte verwenden Sie px), in der sie gut aussehen, oder zumindest so, dass sie für Kurztexte oder kleine Titel verwendet werden können.

Zum Beispiel sieht "League Gothic, 30px" momentan so aus:

Bildbeschreibung hier eingeben

font-face subpixel-rendering Littlemad
quelle
Können Sie mehr Details angeben: Auf welchen Browsern wird es nicht gut dargestellt? Können Sie einige Beispiel-Screenshots zeigen? Möglicherweise liegt hier eher ein grundlegendes Problem beim Rendern als ein Problem mit der Schriftart vor
Pekka unterstützt GoFundMonica am
2
Es geht nicht nur um den Browser, sondern auch um das Betriebssystem. Windows bietet eine Darstellung von Schriftarten, die sich von denen von Mac OS unterscheidet. Ich habe im Moment keinen Mac (nur einen Ipod Touch) bei mir und kann den Unterschied nicht zeigen, aber selbst auf gut gerenderten Browsern für Antialiasing, Face-Fonts ist er für nicht standardmäßige OS-Fonts nicht gut implementiert. Ich habe mich gefragt (weil ich eine begrenzte Anzahl von Schriftarten habe), welche Leute verwenden, die auf dem PC nicht schlecht gerendert sind.
Littlemad
@ Yi Jiang: Genau, weil die Menge der Schriften riesig ist und es nicht möglich ist, alles zu testen oder alles zu haben, frage ich mich, was aus Erfahrung aller die "sicheren Schriften und Schriftgrößen" sind. benutzen. Ich kann sehen, dass niemand etwas gepostet hat, und ich weiß nicht, ob irgendjemand etwas posten wird (oder versucht hat, das Rendering der Schriftarten auf dem PC zu analysieren), daher bin ich trauriger, dass ich kein Feedback habe.
Littlemad
"Art von anständig" ist rein subjektiv.
DA01,

Antworten:

18

Dies sollte ein Kommentar sein (daher wird dieses CW gemacht), aber ich denke, es gibt einige Missverständnisse und falsche Annahmen in der Frage. Da Sie offensichtlich möchten, dass diese Frage beantwortet wird (Sie haben doch ein Kopfgeld angeboten), sind hier meine zwei Cent.

Aus Ihrem Screenshot geht hervor, dass Sie Windows so eingestellt haben, dass Zeichensätze regelmäßig gerendert werden (im Gegensatz zum Rendern mit Subpixeln), und Ihr Browser möglicherweise kein Antialiasing ausführt (möglicherweise, aber dann ist die JPG-Komprimierung weg).

Die folgenden Beispiele für Windows beziehen sich auf XP Pro SP 3, sodass davon ausgegangen werden kann, dass die Situation in Vista und 7 mindestens auf dem gleichen Niveau ist.

Windows hat (in XP) Optionen, um ClearType zu verwenden oder nicht. Ohne ClearType werden die Schriftarten wie in Ihrem Screenshot dargestellt. Dies ist ein stark vergrößertes Bild aus dem Windows-Dialogfeld ohne CT:

Beweise 1

Sie sehen, es ist eine binäre Operation: Pixel ist schwarz oder transparent. Mit einigen modernen Browsern, auch ohne CT, wird jetzt ein gewisses Anti-Aliasing durchgeführt. Dies ist von css-tricks.com mit Windows XP & Chrome 8 und CT ist AUS (wie im vorherigen Bild):

Beweise 2

Sehen Sie, was passiert ist? Wahrscheinlich hast du es bereits getan, wie du in deiner Frage angegeben hast.

HINWEIS: Ich spreche nicht über den Antialiasing-Unterschied zwischen neuen und alten Browsern (z. B. zwischen IE9 und IE6).

Nun ist der ClearType !

Hier ist der exakt gleiche Text aus dem Windows-Dialog, diesmal mit CT: Beweise 3

Wenn Sie daran interessiert sind, worauf dies basiert, lesen Sie den Wikipedia-Artikel zum Subpixel-Rendering . Und wirkt sich das Einschalten von ClearType auf das Rendering des Browsers aus? Derselbe "andere" Text mit Windows XP & Chrome 8 und ClearType ist aktiviert: Beweise 4

Es tut! Und wenn wir schon dabei sind, möchte ich hinzufügen, dass (zumindest) IE 8 ClearType-Rendering verwendet, auch wenn es auf Windows-Ebene deaktiviert ist.

Der Vergleich von Antialias und ClearTyped-Text in 100% ist nicht so radikal wie der Vergleich von ClearTyped-Text mit nicht antialias. Es ist jedoch deutlich mutiger:

aa: Beweise 5CT:Beweise 6

Um zu sehen, wie das ohne Antialiasing aussieht , schauen Sie sich einfach den Screenshot von littlemad an .

Und zum Vergleich ist hier das gleiche "andere" im OS X-Standard-Rendering: Beweise 7 noch mutiger als ClearType.

Um Ihre Frage zu beantworten: Beliebige Schrift . Wenn Ihr Betriebssystem die Schrift anders darstellt, liegt dies möglicherweise daran, dass Sie Ihr Betriebssystem so eingestellt haben, dass Schriftarten so dargestellt werden . ODER es kann sein, dass Ihr Browser kein Antialiasing oder ClearType unterstützt.

Eine andere Frage wäre, warum manche Schriftarten korrekt gerendert werden und andere nicht - wenn dies überhaupt der Fall ist (aber ich sehe keine Probleme auf der Site, die Sie unter Windows erwähnt haben). Oder fragen Sie nach Schriften, die ohne jegliches Rendering angemessen aussehen würden?

Und hier ist auch die Antwort auf die häufig gestellte Frage: "Ja, das alles weiß ich - warum sieht ClearType anders aus als das Rendern von OS X ?!"

Weil sie unterschiedlich sind. Subpixel-Rendering ist nicht leicht zu implementieren. ClearType ist eine eingetragene Marke von Microsoft und mit 10 Patenten geschützt (+ 1 angemeldet; siehe Wikipedia ). Sie können einfach nicht gleich sein.

Koiyu
quelle
Dies ist ein CW, also bearbeite es einfach, wenn ich mich irre. oder fügen Sie Details hinzu, wenn Sie welche kennen.
Jari Keinänen
2
Tolle Erklärung, koiyu, es war, wie ich vermutet habe, aber ich konnte nicht sicher sein, bis er einen Screenshot gepostet hat
JamesHenare
Dein Beitrag lässt mich zweifeln. Ich habe meine Einstellungen überprüft und mich daran erinnert, dass ich bei der Installation von OS Vista den gesamten Effekt auf ein Minimum reduziert habe, um die Leistung zu verbessern. Und rate was? Cleartype war deaktiviert. Ich bin so ein dummer Mensch, entschuldige die Unannehmlichkeiten. Jetzt sehen Schriften viel besser aus, auf jeden Fall lesbar. Weiß also meine Frage mehr: Von welchem ​​Betriebssystem ist Cleartype nicht auf Windows installiert?
Littlemad
@Littlemad kein Problem :) Es war auch für mich nützlich, die Quellen zu überprüfen, damit ich eine Art Antwort anstelle einer bloßen Meinung geben konnte .
Jari Keinänen
1
@Littlemad, cleartype wurde erstmals in Windows XP eingeführt, obwohl es standardmäßig deaktiviert ist. Ab Windows Vista ist es jetzt standardmäßig aktiviert. Auch ab Internet Explorer 7 ist es aktiviert, auch wenn es nicht im gesamten Betriebssystem aktiviert ist. Quelle: en.wikipedia.org/wiki/ClearType
JamesHenare
2

Wenn das Problem mit der Stackoverflow-Frage übereinstimmt, auf die Sie verweisen, stimmt die Antwort dann auch nicht überein ?

Das ist ein Hinweisproblem .

Wenn Sie Ihr Font-Face-Kit generieren (wie in FontSquirrel), müssen Sie Hinweise zu den Expertenoptionen angeben.

Wählen Sie "Experte" und unter "Rendern" Folgendes aus:

Hinweis anwenden - Verbessert das Win-Rendering.

JamesHenare
quelle
1
Nein, es ist nicht dasselbe, Hinting löst das Problem nicht. Ich verwende bereits die im Internet veröffentlichte Lösung für das von Fontsquirell verwendete Font-Face. Worauf ich schaue ist es: Auch wenn einige Schriftarten nicht gut gerendert sind, welche sieht anständig genug aus, um auf dem PC verwendet zu werden? und auf welcher schriftgröße? Ich suche eine Liste sicherer Schriftarten in sicherer Größe. Eine Art "Best Practice" -Referenz.
Littlemad
Es wird empfohlen, keine eingebetteten Web-Schriftarten für die Textgröße zu verwenden. Sie sind nicht dafür optimiert. Belassen Sie sie für Titel und Überschriften.
DA01,
1
@ DA01: Ich bin ein Webdesigner, ich möchte eine gute Typografie entwerfen und verwenden, ich kann die Schriftarten nicht einfach ignorieren, ich möchte herausfinden, welche akzeptabel sind, um sie verwenden zu können.
Littlemad
@Littlemad Ich bin auch ein Webdesigner, der gute Typografie entwerfen und verwenden möchte. Ich weiß, dass das Einbetten von Schriftarten zumindest im Moment hauptsächlich Schriftarten verwendet, die nicht für kleine Textgrößen auf Bildschirmen optimiert sind. Oft mangelt es ihnen an Hinweisen, und ihre Metriken können sehr unterschiedlich sein, wenn das eingebettete Gesicht einem bestimmten Benutzer nicht zur Verfügung steht. Mit Systemschriften , die für Textgrößen optimiert werden auf Bildschirmen ist eine gute Typographie.
DA01
1
@ DAO1: Ja, ich bin auch kein großer Fan dieses Modells, aber ich wollte darauf hinweisen, dass es sich um gute oder schlechte Schriften handelt und nicht darum, dass eingebettete Schriften von Natur aus schlecht sind.
Russell Leggett
1

ttfautohint kann verwendet werden, um den Hinweisbytecode der Schriftart neu zu erstellen. Die Standardeinstellungen (GDI-kompatibel) sollten Windows beim Rendern der Schriftart helfen.

Tobu
quelle
0

Dies hat nichts mit dem Browser zu tun, sondern mit Windows selbst.

* Nix-Systeme (Unix / Linux und OSX sind in diesem Paket enthalten, da es eine Unix-Basis hat) haben die Option, die Anzeige von Text genau zu steuern. Sie sind im Allgemeinen auf Subpixel-Rendering eingestellt (was eine viel technischere Erklärung bietet als ich) Ich gebe Ihnen, aber es verwendet im Wesentlichen die Subpixel (die roten, grünen und blauen Teile der Pixel Ihres Bildschirms), um den Text zu rendern, wobei Windows ClearType verwendet Unscharf an der Mechanik.

Ziemlich einfach ist es, dass Windows keine Subpixel rendert, es sind nicht die Schriftarten oder Dateien, sondern das Betriebssystem, das diese Schriftarten und Dateien anzeigt.

dkuntz2
quelle
Thx für die Erklärung, aber ich weiß, dass das Problem Windows ist, aber ich frage mehr: Welche Art von Schriftarten haben Sie auf Ihrer Website / Client-Website getestet oder verwendet, die Sie verwenden und unter Windows immer noch "ziemlich" anständig aussehen?
Littlemad
Tatsächlich variiert es von Browser zu Browser. Firefox und IE rendern dieselbe Schriftart unterschiedlich, wenn auch nur, weil einer EOT und der andere OTF / TTF / WOFF verwendet. ClearType verwendet auch Subpixel-Rendering. Viele Leute bevorzugen einfach das Antialiasing von OS X gegenüber den Windows-Optionen.
Calvin Huang
@Littlemad, was meinst du mit "ziemlich anständig"? Ich meine, ich habe mich nur damit abgefunden, dass es nicht gut rendert. Hier ist Windows 8.
dkuntz2
@Calvin Huang: ja ich kenne den Unterschied des Browsers beim Rendern, aber es ist nicht das Hauptproblem. Es hängt mit dem Betriebssystem zusammen. Heutzutage machen Browser das Aliasing von Schriften anständig. Windows immer noch nicht. @DKuntz: Was meinst du mit "Windows 8"? Ich sehe viele Leute, die in einer wichtigen Website die Schriftart verwenden, und es ist wirklich sehr hässlich zu sehen, dass gute Designer das tun. Ich suche also nach einer weniger bösen Lösung, die immer noch schlecht gerendert ist, aber zumindest anständig genug, um nicht wie ein Commodore 16-Text auszusehen. Andernfalls muss ich eine js-Lösung verwenden, um Ihren Browser zu überprüfen und einen CSS-Stil zu übergeben, wenn Sie ein Mac oder ein PC sind
Littlemad
4
Diese Erklärung ist falsch oder zumindest unvollständig. Windows macht Subpixel-Anti-Aliasing - das ist es, was Cleartype seit XP ist. Im Vergleich zu OS X macht Windows das Rendern von Schriftarten nicht falsch , sondern anders - der Unterschied ist bestenfalls subjektiv, und Sie werden Leute finden, die es vorziehen, wie Schriftarten unter Windows gerendert werden. Darüber hinaus verwenden Browser unter Windows auch unterschiedliche Rendering-Methoden. Beispielsweise werden bei allen Schriftarten in großen Größen unter Firefox bis zu 3.6 unter Windows sichtbare Unregelmäßigkeiten angezeigt. Dies wird in Version 4 durch Wechseln zur DirectWrite-API behoben.
Yi Jiang
0

Verwenden Sie den folgenden Code in CSS

-webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

Es könnte dir helfen

freiberuflicher webdesigner hyderab
quelle
2
Können Sie bitte besser einen Code zeigen, um den Lesern zu zeigen, was Sie meinen?
Mensch