Wie füge ich benutzerdefinierte Schriftarten mithilfe von .ttf hinzu und stelle die browserübergreifende Kompatibilität sicher?

Einbinden benutzerdefinierter Schriftarten mithilfe von .ttf und CSS

Sie möchten eine .ttf-Schriftart in Ihre Webseite integrieren, stoßen jedoch auf Schwierigkeiten. Lassen Sie uns Ihren Code untersuchen:

<code class="css">@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}</code>

Wo liegt das Problem?

Das Einbinden nur einer .ttf-Datei reicht für die browserübergreifende Kompatibilität nicht aus. Um ein breites Spektrum an Browsern abzudecken, benötigen Sie mehrere Schriftformate.

Umfassende Lösung:

<code class="css">@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}</code>

Dieser Code geht davon aus, dass Sie .eot, .woff, . haben. ttf- und SVG-Formate für Ihre Webschriftart. Web-Font-Generatoren wie Font Squirrel oder Transfonter können diesen Prozess automatisieren.

Moderner Ansatz:

Moderne Browser bevorzugen .woff-Schriftarten, sodass Sie auch Ihren Code vereinfachen können:

<code class="css">@font-face {
    font-family: 'MyWebFont';
    src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}</code>

Zusätzliche Ressourcen:

• CSS-Tricks: Verwendung von @font-face: https://css-tricks.com/snippets/css/using -font-face/
• Kann ich Fontface verwenden: https://caniuse.com/fontface

Das obige ist der detaillierte Inhalt vonWie füge ich benutzerdefinierte Schriftarten mithilfe von .ttf hinzu und stelle die browserübergreifende Kompatibilität sicher?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!