Welche CSS-Regeln sind zum Definieren benutzerdefinierter Schriftarten erforderlich?

Für die Definition einer benutzerdefinierten Schriftart ist die CSS-Regel „@font-face“ erforderlich. Die „@font-face“-Regel bettet hauptsächlich benutzerdefinierte Web-Schriftarten in Webseiten ein, die Syntax lautet „@font-face{font-family: 'font name';src:url('file address');}".

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Wie Sie dafür sorgen, dass Ihre Seite benutzerdefinierte Schriftarten unterstützt, können Sie in einem Satz mit @font-face erreichen.

@font-face ist ein Modul in CSS3. Es bettet hauptsächlich selbstdefinierte Web-Schriftarten in Ihre Webseiten ein. Mit dem Aufkommen des @font-face-Moduls haben wir keine Angst davor ausschließlich websichere Schriftarten zu verwenden. Werfen wir einen Blick auf die Verwendung von @font-face.

Werfen wir zunächst einen Blick auf die grammatikalischen Regeln von @font-face:

   @font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

Wertbeschreibung

1. Dieser Wert bezieht sich auf den Namen Ihrer benutzerdefinierten Schriftart. die auf die Schriftfamilie in Ihrem Webelement verwiesen wird. Zum Beispiel „font-family: „YourWebFontName“;“ Quelle: Dieser Wert bezieht sich auf den Speicherpfad Ihrer benutzerdefinierten Schriftart, der ein relativer Pfad oder ein absoluter Pfad sein kann to ist das Format Ihrer benutzerdefinierten Schriftart, das hauptsächlich zur Identifizierung durch den Browser verwendet wird. Zu seinen Werten gehören hauptsächlich die folgenden Typen: TrueType, OpenType, TrueType-Aat, Embedded-OpenType, Avg usw.; , Gewicht und Stil: Sie müssen mit diesen beiden Werten vertraut sein. Gewicht definiert, ob die Schriftart fett ist, und Stil definiert hauptsächlich den Schriftstil, z. B. Kursivschrift.

Kompatibel mit Browsern

Apropos Browserkompatibilitätsprobleme mit @font-face: Hierbei handelt es sich um ein Problem mit dem Schriftartformat, da verschiedene Browser inkonsistente Unterstützung für Schriftartformate bieten, sodass jeder wissen muss, um welche Art es sich handelt Die Anzahl der Schriftarten wird von verschiedenen Browserversionen unterstützt. Jetzt werde ich separat auf dieses Problem eingehen, damit sich jeder ein Bild machen kann:

1. TrueTpe-Format (.ttf):

Die Schriftart .ttf ist die am häufigsten verwendete Schriftart für Windows und Mac. Sie ist daher nicht für Websites optimiert. Die Browser, die diese Schriftart unterstützen, sind [IE9+, Firefox3.5+, Chrome4+, Safari3+, Opera10+, iOS Mobile Safari4.2+];

2. OpenType (.otf)-Format:

.otf-Schriftart gilt als Original-Schriftartformat, das auf der Basis von TrueType basiert und daher den Browsern mehr Funktionen bietet Unterstützt diese Schriftart: [Firefox3.5+, Chrome4.0+, Safari3.1+, Opera10.0+, iOS Mobile Safari4.2+]

3. Web Open Font Format (.woff) Format:

.woff-Schriftart ist das beste Format unter den Web-Schriftarten. Es ist eine offene komprimierte Version von TrueType/OpenType. Es unterstützt auch die Trennung von Metadatenpaketen und unterstützt dies. Die Schriftartenbrowser umfassen [IE9+, Firefox3.5+, Chrome6+, Safari3. 6+, Opera11.1+];

4. Die Schriftart „Embedded Open Type“ (.eot) ist eine spezielle Schriftart für IE. Sie können diese Formatschrift aus TrueType erstellen Schriftarten sind [IE4+];

5. SVG-Format (.svg):

.svg-Schriftart ist ein Format, das auf der Darstellung von SVG-Schriftarten basiert. Zu den unterstützten Browsern für diese Schriftart gehören [Chrome4+, Safari3.1+, Opera10.0 +, iOS Mobile Safari3.2+].

Das bedeutet, dass wir in @font-face mindestens zwei Formatschriftarten benötigen, .woff und .eot, und sogar .svg und andere Schriftarten, um mehr Browserversionen zu unterstützen.

Damit @font-face mehr Browserunterstützung erreichen kann, hat

Paul Irish eine einzigartige @font-face-Syntax namens Bulletproof @font-face

:

   @font-face {
	font-family: 'YourWebFontName';
	src: url('YourWebFontName.eot?') format('eot');/*IE*/
	src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
   }

geschrieben. Um jedoch mehr Browserunterstützung zu ermöglichen, müssen Sie kann es auch so schreiben:

   @font-face {
	font-family: 'YourWebFontName';
	src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
	src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
             url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
   }

Nachdem wir so viel leeres theoretisches Wissen gesagt haben, muss es jeden ein wenig jucken, also schauen wir uns zunächst an, wie man die blaue Schriftart im Navigationsteil der W3CPLUS-Homepage implementiert Ein solches DOM-Tag erfordert die Anwendung einer benutzerdefinierten Schriftart:

HTML-Code:

   <h2 class="neuesDemo">Neues Bauen Demo</h2>

Definieren Sie Ihre eigene Web-Schriftart über @font-face:

  @font-face {
    font-family: 'NeuesBauenDemo';
    src: url('../fonts/neues_bauen_demo-webfont.eot');
    src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/neues_bauen_demo-webfont.woff') format('woff'),
	url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'),
	url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg');
    font-weight: normal;
    font-style: normal;
  }

Ich verwende hier einen relativen Pfad, natürlich können Sie ihn auch verwenden Absoluter Weg. An dieser Stelle müssen wir die definierte Schriftart auf unsere eigentliche Seite anwenden:

   h2.neuesDemo {
      font-family: 'NeuesBauenDemo'
   }

Effekt:

(Teilen von Lernvideos:

CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonWelche CSS-Regeln sind zum Definieren benutzerdefinierter Schriftarten erforderlich?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!