Warum sieht eine Schriftart auf meiner Seite verpixelt aus, wenn sie auf Google Fonts fehlerfrei dargestellt wird?

Ich versuche, Merriweather und Source Sans Pro für meine Website zu verwenden. Diese Schriftarten sehen auf der Google Fonts-Website einwandfrei aus. Wenn ich jedoch versuche, sie auf meinen Webseiten zu verwenden, sehen sie verpixelt aus. Sogar auf demselben Browser, der sie auf der Google Fonts-Website perfekt anzeigt. Zum Beispiel

Geben Sie hier die Bildbeschreibung ein

Beide Zeilen sehen pixelig aus. Vor allem der erste ain der Überschrift.

Irgendwelche Hinweise woran es liegen könnte?

Nicht sicher was du meinst. Schriftarten werden mit Pixeln gerendert ... Ihr Bild hat Anti-Aliasing. Vielleicht Vergleich mit der Schrift in der gleichen Größe und Farbe wie in Google Fonts zeigen?

Antworten (2)

Ich sehe nichts, was ich als "pixelig" bezeichnen würde. Es sieht eher nach einem Rendering-Problem aus. Ich habe dies auf der Google Fonts-Website getestet, und zwar mit einem einfachen HTML-Dokument, das sowohl in Firefox als auch in Chrome (Windows 10) angezeigt wird, mit Text in derselben Größe und Rendering sieht für mich identisch aus.

Ich habe jedoch festgestellt, dass das "a" bei einigen Schriftgrößen nicht so gut wiedergegeben wird.

Bei 36px ist die obere Geschoßkurve des "a" verdickt. Während es bei 35px viel besser aussieht. Was die Ursache des Problems betrifft, bin ich mir nicht sicher. Vielleicht ist es ein Win10-Problem, ein Browser-Rendering-Problem oder vielleicht das Schriftdesign selbst.

Geben Sie hier die Bildbeschreibung ein

Hier ist der HTML-Code, falls jemand ihn testen möchte:

 <!DOCTYPE html>
<html>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap" rel="stylesheet"> 
<body>

<h1 style="font-family: 'Merriweather', serif; font-size: 36px; font-weight: 700;">Leader election in Go</h1>
<h1 style="font-family: 'Merriweather', serif; font-size: 35px; font-weight: 700;">Leader election in Go</h1>

</body>
</html>

Dies ist ein häufiges Problem bei der Wiedergabe von Schriftarten im Web. Es gibt eine uralte CSS-Lösung, die das Erscheinungsbild glättet und das Subpixel-Rendering weiter mischt.

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
Warum sieht eine Schriftart auf meiner Seite verpixelt aus, wenn sie auf Google Fonts fehlerfrei dargestellt wird?
AntwortenHierDatenschutz-Bestimmungen1y, 0v