Das Problem der Einführung der angegebenen Schriftart @font-face in CSS, um mit verschiedenen Browsern kompatibel zu sein

Wenn Sie beim Erstellen einer Webseite eine bestimmte Schriftart verwenden möchten, können Sie über @font-face darauf verweisen. Dadurch wird das Problem gelöst, dass die Schriftart nicht lokal auf dem Computer des Benutzers installiert ist und nicht entsprechend dem entworfenen Stil angezeigt werden kann.

Beachten:

Die Browser, die @font-face unterstützen, sind Internet Explorer 9, Firefox, Opera, Chrome und Safari. Darüber hinaus unterstützt IE9 nur .eot-Schriftarten, während Firefox, Chrome, Safari und Opera .ttf- und .otf-Schriftarten unterstützen.

Allgemeine Verwendung:

@Schriftart {
 font-family: 'myFirstFont'; //Definieren Sie den Schriftnamen. Wenn Sie die Schriftart später verwenden möchten, verwenden Sie diesen Namen src: url('YourWebFontName.ttf'),
  url('IhrWebFontName.eot'); /* IE9 */
} 

h1 {Schriftfamilie:'myFirstFont';}

Kompatibilitätsschreiben

@Schriftart {
 Schriftfamilie: „myFirstFont“;
 src: url('IhrWebSchriftartenname.eot'); /* IE9-Kompatibilitätsmodi */
 src: url('IhrWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('IhrWebSchriftartenname.woff') format('woff'), /* Moderne Browser */
         url('IhrWebSchriftartenname.ttf') format('truetype'), /* Safari, Android, iOS */
         url('IhrWebSchriftartenname.svg#IhrWebSchriftartenname') format('svg'); /* Legacy iOS */
}

Verschiedene Browser unterstützen unterschiedliche Schriftformate. Wenn man die aktuellen Mainstream-Browser als Referenz nimmt, erfordert die Verwendung von @font-face mindestens die Schriftformate .woff, .eot und .SVG. Selbst .svg und andere Schriftarten sind erforderlich, um mehr Browserversionen zu unterstützen.

.TTF, .OTF – für Firefox 3.5, Safari, Opera;
.EOT – für Internet Explorer 4.0+;
.SVG – für Chrome, iPhone

Besorgen Sie sich drei Dateiformate der Schriftart, die Sie verwenden möchten, um sicherzustellen, dass die Schriftart in den gängigen Browsern richtig angezeigt werden kann.

Erweiterung: Font Path

„local“ bedeutet die lokale Adresse, „url“ bedeutet die URL (Schriftarten im URL-Pfad. Wenn die Webseite geladen wird, werden die Schriftarten automatisch vom Server heruntergeladen. Wenn die Schriftdatei also zu groß ist, wird die Webseite langsam geladen).

Als Code

@Schriftart {
  Schriftfamilie: „myFirstFont“;
  src: url('IhrWebFontName.eot'), local('IhrFontName.eot');
}

Beachten:

Wenn in src mehrere Schriftarten definiert sind, handelt es sich um Kandidatenbeziehungen in der Reihenfolge. Wenn die definierten Schriftarten oder die Reihenfolge geändert werden, müssen Sie den Browser erneut öffnen, um den geänderten Effekt anzuzeigen. Das Aktualisieren ist ungültig.

Die Rolle der font-family in @font-face besteht darin, Schriftvariablen zu deklarieren, was sich von font-family in normalen Selektoren unterscheidet.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Einführung bestimmter Schriftarten @font-face in CSS, um mit verschiedenen Browsern kompatibel zu sein. Weitere relevante Inhalte zu CSS-Schriftarten @font-face finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!