Warum werden Schriftarten unter Windows und Mac unterschiedlich gerendert?

Plattformübergreifende Inkonsistenzen bei der Schriftartwiedergabe: Behebung von @font-face Anti-Aliasing-Diskrepanzen zwischen Windows und Mac

Im Bereich der plattformübergreifenden Bei der Webentwicklung einer Plattform kann es eine verwirrende Aufgabe sein, eine konsistente Schriftwiedergabe über verschiedene Betriebssysteme hinweg zu erreichen. Ein häufiges Problem bei @font-face-Kits ist das unterschiedliche Erscheinungsbild von Schriftarten zwischen Windows- und Mac-Systemen.

Ein besonderes Beispiel hierfür tritt bei der Verwendung von Schriftarten auf, die von Fontsquirrel.com erstellt wurden. Entwickler stoßen häufig auf eine Diskrepanz beim Anti-Aliasing zwischen den beiden Plattformen. Unter Windows erscheinen die Schriftarten im Vergleich zu ihren Mac-Gegenstücken möglicherweise dicker und rauer.

Die Lösung: Priorisierung des SVG-Schriftformats für Chrome

Nach ausführlicher Erkundung wurde eine Lösung gefunden Es ist eine Lösung entstanden, die diese Inkonsistenzen bei der Darstellung plattformübergreifender Schriftarten behebt. Der Schlüssel liegt in der Änderung des von Fontsquirrel.com generierten CSS-Codes.

Ursprünglich folgt der CSS-Code dieser Struktur:

@font-face {
    font-family: 'Font Name';
    src: url('font-file.eot');
    src: url('font-file.eot?#iefix') format('embedded-opentype'),
         url('font-file.woff') format('woff'),
         url('font-file.ttf') format('truetype'),
         url('font-file.svg#Font Name') format('svg');
    font-weight: normal;
    font-style: normal;
}

Für Chrome-Browser unter Windows ist dies jedoch unbedingt erforderlich Priorisieren Sie das SVG-Schriftartformat, indem Sie die entsprechende Zeile an den Anfang der Quellliste verschieben:

/* THIS WORKS FOR ME */
@font-face {
    font-family: 'Font Name';
    src: url('font-file.svg#Font Name') format('svg'),
         url('font-file.eot') format('embedded-opentype'),
         url('font-file.woff') format('woff'),
         url('font-file.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Durch Priorisierung des SVG-Formats für Chrome rendert der Browser die Schriftart mit optimalem Anti-Aliasing, was zu einem einheitlichen Erscheinungsbild auf Windows- und Mac-Systemen führt.

Das obige ist der detaillierte Inhalt vonWarum werden Schriftarten unter Windows und Mac unterschiedlich gerendert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!