Schriftarten-Rendering für Webseiten

Question

Beim Erstellen von Webseiten stoße ich immer auf das gleiche Problem.Wenn ich eine Schriftart hinzufüge, die größer als etwa 16–18 Pixel ist, sieht das schrecklich aus.Es ist gezackt und pixelig.Ich habe versucht, verschiedene Schriftarten und -stärken zu verwenden, hatte damit jedoch nicht viel Erfolg.

Notiz:Das ist nur bei Windows so.Hauptsächlich in Opera und FF, auch im IE7, aber nicht ganz so schlimm.Unter Linux sieht die Schriftart gut aus.Ich habe mir keinen Mac angesehen.

Was macht ihr, um das zu beheben?wenn überhaupt.Mir ist aufgefallen, dass die Titel hier auf SO ebenfalls ziemlich gezackt sind, aber gerade klein genug, um nicht schlecht auszusehen.

Answer 1

Sie können den Benutzer nicht dazu zwingen, die Art und Weise zu ändern, wie sein Betriebssystem Schriftarten darstellt.Wenn es für Sie eine so große Sache ist, können Sie die großen Überschriften durch Bilder ersetzen. Auf diese Weise können Sie genau steuern, wie die Schriftart gerendert wird (und sicherstellen, dass die Überschrift genau so aussieht, wie Sie es wünschen, auch wenn der Benutzer Ihren Vorschlag nicht hat). Schriftart installiert).

Wenn Sie dies tun, stellen Sie sicher, dass Sie eine alternative Textdarstellung für diejenigen bereitstellen, die keine Bilder sehen.Ich neige dazu, CSS zu verwenden, um ein Hintergrundbild anzuzeigen und den Inhalt der Überschrift auszublenden.So was.

<style>
    h1
    {
        height: 32px;
        width: 100px;
        background: url("path/to/image")
    }

    h1 span
    {
        display: none;
    }
</style>

<h1>
    <span>
       Heading Text
    <span>
</h1>

Um ehrlich zu sein, scheint dies übertrieben zu sein, wenn es sich um große Texte handelt.Und seien Sie sich bewusst, dass sich dadurch die Datenmenge erhöht, die Ihre Kunden herunterladen müssen.Bei einer großen Überschrift kann diese Methode jedoch zu etwas führen, das schöner aussieht als der vom Betriebssystem gerenderte Text.

Answer 2

Das Aktivieren von Anti-Aliasing sollte das Anzeigeproblem lösen.

Answer 3

Versuchen Sie neben Anti-Aliasing auch, Clear Type zu aktivieren.

Answer 4

Unter Windows aktivieren ClearType werde das lösen.Sie können Benutzer jedoch nicht zur Verwendung zwingen.Es handelt sich nicht um ein Browserproblem;Dabei handelt es sich um die Schriftglättungsmethode des Betriebssystems.