Zusammenfassung der Schlüsselpunkte

Die
• CSS -Regeln erm?glichen die Verwendung benutzerdefinierter Schriftarten im Webdesign, wodurch die Leistung und die Verbesserung der Typografie verbessert werden. Testen Sie diese benutzerdefinierten Schriftarten auf verschiedenen Betriebssystemen und Browsern, um sicherzustellen, dass sie korrekt angezeigt werden. @font-face Die
CSS -Eigenschaft kann verwendet werden, um den Zeichenbereich der angewendeten benutzerdefinierten Schriftarten zu begrenzen. Dies ist besonders nützlich, um Sonderzeichen oder Symbole direkt zum Tag hinzuzufügen oder spezielle Schriftarten für bestimmte Zeichen zu verwenden.
• unicode-range Mithilfe der Eigenschaft
k?nnen Sie die Leistung der Webseiten verbessern, indem Sie sicherstellen, dass nur die erforderlichen Zeichen heruntergeladen und verwendet werden, wodurch die Menge der Daten, die geladen werden müssen, verringert werden. Es ist jedoch wichtig zu beachten, dass nicht alle Browser diese Eigenschaft unterstützen, sodass im CSS -Code alternative Schriftarten bereitgestellt werden sollten.
• unicode-range

Video Erkl?rung (Auszug aus dem Textentwurf)

Im vorherigen Abschnitt haben wir verschiedene Textstilattribute gelernt.

In modernen Browsern (und IE4 und sp?ter) k?nnen wir

benutzerdefinierte

Schriftarten hinzufügen, um das Design der Website zu verbessern. Wir k?nnen die verschiedenen Funktionen dieser benutzerdefinierten Schriftarten verwenden, um die Leistung zu verbessern und die Typografie insgesamt zu verbessern.

Wir werden diesen Abschnitt lernen:

Detaillierte Erl?uterung der Regeln
• @font-face So verwenden Sie Schriftstapel und
, um die Typografie
• zu steuern unicode-range

@font-face In der Vergangenheit war die Schriftauswahl auf Webseiten auf eine kleine Anzahl von "Netzwerksicherheits" -Be -Schriftarten beschr?nkt, wie z. B.

Arial

• Comic sans
• Courier New
• Georgia
• Impact
• Palatino
• Tahoma
• Times New Roman
• Trebuchet
• Verdana
Einige dieser Schriftarten sind ausgezeichnet und eignen sich perfekt für Webseiten - Georgia ist eine Serifenschrift, Arial oder Verdana sind gro?artige Schriftarten. Comic Sans ist sicherlich nicht das Beste ...

Aber jetzt k?nnen wir eine Vielzahl von benutzerdefinierten Schriftarten verwenden und es in allen Browsern mit

erscheinen lassen.

@font-face W?hrend wir dies tun k?nnen, lohnt es sich immer, benutzerdefinierte Schriftarten auf einer Reihe von Betriebssystemen und Browsern zu testen, um sicherzustellen, dass sie wie erwartet aussehen.

Denken Sie auch daran, dass Schriftartdateien sehr gro? sein k?nnen. Verwenden Sie sie daher mit Bedacht, um Leistungsprobleme zu vermeiden. Die Syntax von

lautet wie folgt:

Schriftarten werden mithilfe des Attributs @font-face benannt und geben dann eine Reihe verschiedener Dateitypen und Formate für verschiedene Browser an.

@font-face {
  font-family: 'Baskerville';
  src: url('baskerville.eot?#iefix') format('embedded-opentype'); 
  url('baskerville.woff') format('woff'); 
  url('baskerville.ttf') format('truetype');
  url('baskerville.svg#Baskerville') format('svg');
}

Um zu vermeiden, dass Benutzer vorhandene Schriftarten im System herunterladen, k?nnen Sie den lokalen Namen der Schriftart angeben, nach der nach

gesucht werden soll. font-family

Um alle richtigen Schriftformate für verschiedene Browser zu erstellen, habe ich eine gro?artige Online -Ressource namens Font Squirrel verwendet.

Sie haben einen Web -Schriftart -Generator, der sehr gut funktioniert. Der Download enth?lt auch alle Code -Snippets zum Hinzufügen dieser benutzerdefinierten Schriftarten in CSS, was ebenfalls praktisch ist!

unicode-range

Jedes Zeichen in einer Schrift kann durch seine Unicode -Zahl in der Form:

beschrieben werden:

@font-face {
  font-family: 'Baskerville';
  src: url('baskerville.eot?#iefix') format('embedded-opentype'); 
  url('baskerville.woff') format('woff'); 
  url('baskerville.ttf') format('truetype');
  url('baskerville.svg#Baskerville') format('svg');
}

Die Zeichenfolge "Atoz CSS" kann durch Unicode wie folgt dargestellt werden:

<code>U+0041</code>

Jedes Zeichen, einschlie?lich Leerzeichen, hat eine eindeutige Unicode -Nummer. Das UTF-8-Zeichensatz enth?lt auch eine Reihe von Sonderzeichen, die zum Hinzufügen von Formen und Symbolen direkt zum Markup nützlich ist.

@font-face Beim Hinzufügen von benutzerdefinierten Schriftarten mit

k?nnen wir den Charakterbereich einschr?nken, den sie anwenden, was auf den ersten Blick etwas seltsam ist, aber bitte seien Sie geduldig mit mir zu erkl?ren.

Das kursive Symbol der Baskerville -Schriftart ist sehr sch?n und viele Designer verwenden es gerne, auch wenn sie den Rest der Baskerville -Schrift nicht verwenden.

<span> Eine M?glichkeit, diese spezielle Schriftart für das Ampers und nur für das font-family -Tag zu verwenden und ein anderes

dafür einzustellen. Dies ist jedoch etwas umst?ndlich und kann ohne zus?tzliche Markierungen vollst?ndig erledigt werden.

Wir k?nnen eine Schriftart erstellen, die nur diesen Charakter enth?lt und sie als erste Schriftart in der Liste zu unserem Schriftstapel hinzufügen.

Wenn der Browser auf ein Zeichen trifft, das in der Schrift nicht vorhanden ist, scannt er den Stapel ab, bis die Schriftart die erforderlichen Zeichen enth?lt. Wir k?nnen dieses Verhalten nutzen, um spezielle Verst?rker hinzuzufügen, wenn wir eine benutzerdefinierte oder netzwerksichere Schriftart verwenden.

@font-face Erstens erstellen wir die

-Regel, um eine einzelne Zeichenschrift zu laden. Ich werde es "Ampersand" nennen und eine lokale Schriftart -Dateiquelle verwenden, um Bandbreite zu speichern.

unicode-range i Geben Sie

als u 0026 für einen einzelnen Verst?rker und Zeichen und Zeichen an. Der gesamte Zeichenbereich kann angegeben werden, wie der Eigenschaftsname zeigt, in diesem Fall ist jedoch nur ein Zeichen erforderlich.

<code>A      t      o      Z      space  C      S      S
U+0041 U+0074 U+006F U+005A U+0020 U+0043 U+0053 U+0053</code>

In diesem Beispiel habe ich eine Reihe von Titeln und Abs?tzen, die beide mehrere Symbole enthalten.

Ich werde zwei verschiedene Schriftstapel erstellen, einen für den Titel und einen für den K?rper. In jedem Fall wird die erste Schrift im Stapel eine benutzerdefinierte "Ampersand" -Schriftart sein.

Für Titel füge ich Museo- oder Rockwell- oder Serif -Schriftarten als alternative Schriftarten hinzu.

Für den K?rper werde ich Avenir, Arial oder Sans-Serif als alternative Schriftart hinzufügen.

@font-face {
  font-family: 'Ampersand';
  src: local('Baskerville-italic');
  unicode-range: U+0026;
}

Das war's. Wenn der Browser den Text rendert, enth?lt die erste Schrift im Stapel nur ein Ampersand -Charakter, sodass der Rest der Zeichen mit der n?chsten Schriftart in der Liste (falls gefunden).

Die Browserunterstützung von unicode-range

ist gut. Es wird in allen modernen Browsern (au?er Firefox) sowie in IE9 und sp?ter unterstützt. Da dies eine rein visuelle Verbesserung ist, ist die Browserunterstützung für mich kein gro?es Problem - nicht unterstützte Browser erhalten nur die erste Schrift im Stapel, die erfolgreich geladen werden kann.

(Der nachfolgende FAQ-Teil wurde weggelassen, da er nicht mit dem pseudooriginalen Ziel übereinstimmt und zu lang ist. Der Kerninhalt wurde in den obigen Teilen widerspiegelt.)

Das obige ist der detaillierte Inhalt vonATOZ CSS Screencast: Unicode Range und @Font-Face. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!