Share
Web-Fonts haben dazu beigetragen, Designs lebendiger zu gestalten und so die Systemfehler zu vermeiden, die während der ersten Tage des Webdesigns so weit verbreitet waren. Mit so vielen verfügbaren Optionen haben wir heute viele Tricks im Ärmel, um benutzerdefinierte Schriftarten zu bedienen und zu gestalten. In Stufe 4 des CSS-Schriftartenmoduls finden Sie weitere interessante Optionen, darunter einige aufregende Eigenschaften wie font-min / max-size. Dieser Artikel wird nicht jeden letzten Krümel der Stufe 4 aufdecken, sondern die interessanten Teile, die noch in den Kinderschuhen stecken, hervorheben. Das Abenteuer beginnt jetzt!
Derzeit sitzen wir zwischen zwei Spezifikationsniveaus. Auf einer Seite haben wir Stufe 3; eine Spezifikation, die seit Oktober 2013 in der „Kandidatenempfehlung“ enthalten ist. Mit Blick auf die Zukunft haben wir Stufe 4; Eine Spezifikation, die seit Juli 2017 bei „Working Draft“ ruht. Wenn Sie eine Erinnerung bezüglich der Reihenfolge der W3C-Spezifikationsstufen benötigen, nehmen wir uns einen Moment Zeit, um sie zu überprüfen:
Nachdem wir nun die Spezifikationsphasen verstanden haben, wollen wir in den Kern von Level 4 eintauchen und einige der bekannten und dokumentierten Funktionen dieses Moduls ans Licht bringen.
Teile von Level 3, die standardisiert werden, werden in Level 4 portiert, Level 4 enthält jedoch auch eigene, einzigartige Ergänzungen. Abschnitte wie Schriftvariationen, Steuerelemente für die Wiedergabe von Schriftarten, Unterstützung für Farbschriften, grundlegende Eigenschaften der SchriftundFont Resources enthält brandneue Elemente, die viele Entwickler als nützlich erachten.
Das gerenderte Schriftbild wird durch das Zeichen bestimmt Schriftfamilie und andere Schriftart-Eigenschaften, die für ein bestimmtes Element gelten, wie z Schriftgewicht und Schriftstil zum Beispiel. Diese Struktur ermöglicht, dass die Einstellungen unabhängig voneinander und von den verschiedenen Einstellungen variieren Grundlegende Schriftart-Eigenschaften. Also, was ist für diese Gruppe geplant??
.element font-min-size: 0.875rem; max-Schriftgröße: 5rem;
Von allem, was in Level 4 beschrieben wird, sind diese beiden Eigenschaften mein Favorit, da beide Elemente eines Elements zulassen Schriftgröße zwischen den angegebenen Werten „eingeklemmt“ werden. Dies sind sicherlich super tolle Neuigkeiten für responsive Design-Fans. Die Werte können eine absolute Größe, eine relative Größe oder einen Längenprozentsatz sein.
Zu diesem Zeitpunkt gibt es keine Dokumentation, in der angegeben wird, wie das Größenänderungsereignis des Browsers eine der beiden Eigenschaften auslöst. Wenn Sie mit dieser Funktion mit dem Flag für experimentelle Webplattform-Features in Chrome experimentieren möchten, haben Sie kein Glück.
Die meisten in diesem Abschnitt beschriebenen Elemente unterstützen Sie bei der Steuerung von Aspekten, die sich auf das Abrufen, Referenzieren und Anzeigen der Schriftfamilie Ihrer Wahl beziehen.
@ font-face font-display: auto | Block | tauschen | Rückfall | wahlweise;
Diese Eigenschaft legt fest, wie eine Schriftart angezeigt wird, je nachdem, ob und wann sie heruntergeladen wurde und vom Browser verwendet werden kann. Es ist auch für den Gebrauch in Ihrem bestimmt @Schriftart oder @ font-feature-values Erklärung.
Accentsconagua
Auto: Die Zeichensatzrichtlinie ist vom Benutzer definiert (d. H. Der Browser), sofern sie nicht explizit in CSS definiert ist.Block: Gibt der Schriftart eine kurze Blockperiode (in den meisten Fällen wird 3s empfohlen) und eine unendliche Swap-Periode.Wechsel: Gibt der Schriftart eine 0s-Blockperiode und eine unendliche Swap-Periode.Zurückfallen: Verleiht der Schriftart eine extrem kleine Blockperiode (in den meisten Fällen wird eine Zeitspanne von 100 ms oder weniger empfohlen) und eine kurze Swap-Periode (in den meisten Fällen wird eine 3-Sekunden-Periode empfohlen)..wahlweise: Verleiht der Schriftart eine extrem kleine Blockperiode (in den meisten Fällen werden 100 ms empfohlen) und eine 0s-Swap-Periode.Für alle, die auf die Leistung von Web-Fonts achten und wer täglich beschäftigt ist FOUT oder FOIT, dann wird diese Eigenschaft Sie sehr erfreuen.
@ font-feature-values font-display: auto | Block | tauschen | Rückfall | wahlweise;
Wann Schriftdarstellung wird in a weggelassen @Schriftart Regel verwendet der Benutzeragent das Schriftdarstellung Wert eingestellt über @ font-feature-values für das relevante Schriftfamilie Wenn eine Einstellung festgelegt ist, wird die Standardeinstellung verwendet Font-Anzeige: Auto. Siehe vorherige Erklärung bezüglich Schriftdarstellung Werte.
Der Regelsatz ist ideal für Fälle, in denen eine Schrift über einen Drittanbieter bereitgestellt wird und Sie keine Kontrolle über die Schriftart haben @Schriftart Regeln, können jedoch immer noch einen Standard festlegen Schriftdarstellung Politik für die zur Verfügung gestellten Schriftfamilie. Dies ist eine gute Nachricht für die Baustellen mit ununterbrochenen Maßnahmen Dritter.
@ font-feature-values font-family: "Name der benutzerdefinierten Schriftart", serifenlos; Font-Anzeige: Fallback;
Obwohl noch neu und etwas vage, kann ich nur annehmen, um ein bestimmtes zu kontrollieren Schriftfamilie Darstellungsverhalten muss der Entwickler das verwenden Schriftfamilie Eigenschaft innerhalb dieses Regelsatzes, um auf die gewünschte Schrift zu zielen. Auch dies ist nur eine Annahme meinerseits und keinesfalls sachlich.
Dieser Abschnitt ist zu 100% neu und spezifisch für Stufe 4. Die meisten derzeit dokumentierten Funktionen beziehen sich auf die Größe und Einstellungen der einzelnen Schriftarten.
Diese Eigenschaft wird verwendet, um Stilmerkmale beizubehalten und die Lesbarkeit bei verschiedenen optischen Größen zu verbessern. Mit digitaler Schrift haben wir die Möglichkeit, eine Schrift auf eine beliebige Größe zu skalieren, dies berücksichtigt jedoch nicht das Erscheinungsbild der Schrift bei diesen unterschiedlichen Größen.
„Text, der in verschiedenen Größen gerendert wird, profitiert oft von etwas unterschiedlichen visuellen Darstellungen. Um beispielsweise das Lesen bei kleinen Textgrößen zu erleichtern, sind Striche bei größeren Serifen häufig dicker. Größere Texte haben oft eine empfindlichere Figur mit mehr Kontrast zwischen dickeren und dünneren Strichen. “- Level 4 Working Draft
.element font-optical-size: auto | keiner
Auto: Der Benutzeragent kann die Form von Glyphen auf der Grundlage von ändern Schriftgröße und die Pixeldichte des Bildschirms. Bei OpenType- und TrueType-Schriftarten, die Schriftvariationen verwenden, geschieht dies häufig mit der opsz Schriftvariation.keiner: Der Benutzeragent darf die Form der Glyphen für die optische Größe nicht ändern..Element Font-Variation-Einstellungen: Normal | []
Diese Eigenschaft ermöglicht eine einfache Steuerung der Variationen von OpenType- oder TrueType-Schriftarten. Es ist dazu gedacht, den Zugriff auf Schriftartenvariationen zu ermöglichen, die nicht häufig verwendet werden, aber für einen bestimmten Anwendungsfall erforderlich sind.
normal: Der Text wird mit den Standardeinstellungen angelegt. .Element / * Achsname und -nummer mit vier Buchstaben * / font-Variation-Einstellungen: "opsz" 0.5;
Der im obigen Code verwendete Zeichenfolgewert ist als der aus vier Buchstaben bestehende Achsenname bekannt, der das zu ändernde Merkmal beschreibt, zusammen mit dem Abweichungswert, der normalerweise im Bereich von 0-1 liegt. Bei Bedarf können jedoch auch negative Werte verwendet werden. Die zulässigen Abweichungen hängen immer von der gewählten Schriftart ab.
Farbfonts sind für Level 4 brandneu und ermöglichen Schriftarten die Beschreibung der Konturen, die die Kanten von Glyphen beschreiben, aber auch die Farben in den Glyphen. Warum möchten Sie eine dieser Funktionen verwenden? Ich schlage vor, diesen Artikel von Grace Fussell zu lesen, um auf den neuesten Stand zu kommen:
.element font-palette: normal | Licht | dunkel |;
Viele Dateiformate für Farbschriften ermöglichen die Parametrisierung von Farben in Glyphen. In diesen Schriftarten wird auf Farben bei der Beschreibung der Geometrie der einzelnen Glyphen Bezug genommen. Diese Indizes werden in einer aktuell aktiven Palette mithilfe einer in der Schriftart vorhandenen Nachschlagetabelle aufgelöst. Viele Zeichensätze enthalten jedoch mehrere Paletten, von denen jede einen Satz komplementärer Farben enthält, die vom Zeichensatzdesigner ausgewählt wurden, um ansprechende visuelle Ergebnisse zu erzielen. Entwickler können eine Palette mit Hilfe von definieren @ font-palette-values Regel im nächsten Abschnitt erwähnt.
/ * Syntax * / @ font-palette-values/ * Beispiel * / @ font-palette-values Augusta font-family: Handover Sans; Basispalette: 3; 1: rgb (43, 12, 9); 3: var (- hervorheben);
Dies stellt eine Farbpalette dar, die in einer Schriftart verwendet wird. Sie definiert eine Farbpalette und ordnet diese Farbpalette einer bestimmten Schriftart zu. Auf diese Weise kann ein Webautor beliebige Farben auswählen, die in einer Farbschrift verwendet werden sollen, anstatt auf die bereits vorhandenen Paletten in Schriftdateien beschränkt zu sein
Basispalette: Dieser Deskriptor gibt eine Palette in der Schriftart an, die die @ font-palette-values-Regel als Anfangswert verwendet. Wenn nein .element font-family: 'Name der benutzerdefinierten Schriftart'; Schriftdarstellung: auto | Text | Emoji;
Mit dieser Eigenschaft können Webautoren auswählen, ob für bestimmte Emoji-Codepunkte eine Emoji-Präsentation oder eine Textdarstellung verwendet wird. Ein großer Gewinn für Emoji-Fanatiker 😎
Es gibt sicherlich viele aufregende neue Funktionen für Webfonts. Ich empfehle Ihnen, mit Ihren Favoriten zu experimentieren, sobald diese verfügbar sind. Wenn Sie einen bestimmten Favoriten der Stufe 4 oder sogar der Stufe 3 haben, teilen Sie uns dies in den Kommentaren mit, einschließlich etwaiger Meinungen zu den besprochenen Funktionen.
!
