ATOZ CSS Screencast: Unicode Range und @Font-Face

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!