Web-lettertypen gebruiken

Sep 17, 2025

Procedures

Het volgende is een fragment uit het WebFont-handboek van Bram Stein. Koop het hier

Weblettertypen zijn gedefinieerd in CSS via de @ Font-face regel. Als je een webontwikkelaar bent, heb je hoogstwaarschijnlijk geschreven, gekopieerd en geplakt, of op zijn minst gezien een @ Font-face regel.

Omwille van de volledigheid, laten we echter snel door een basisvoorbeeld doorlopen:

 @ Font-Face {
  Font-familie: Elena;
  SRC: URL (Elena-regular.woff);
}

Dit creëert een nieuwe web-lettertype-familie die kan worden verwezen via de font-familie of doopvont Shortand-onroerend goed. Maar er is iets mis. Wanneer u een weblettertype in een letterstapel verwijst, zorg er dan altijd voor dat u ten minste één fallback-lettertype opneemt voor het geval het webliefstuk niet laadt.

Hier, als Elena niet laadt, zal de browser terugvallen op de generieke serief Font-familie:

 P {
  Font-familie: Elena, Serif;
}

Er is meer te fallback-lettertypen, maar laten we onze lettertype eenvoudig eenvoudig houden door alleen de generieke toezicht op te nemen serief en sans-serif Font families.

Font-families

Het creëren van een font-familie met meerdere stijlen wordt bereikt door het maken van een @ Font-face regel voor elke stijl en het gebruik van hetzelfde font-familie naam. Het volgende @ Font-face Regels creëren een gezin met een normale en gedurfde stijl:

 @ Font-Face {
     Font-familie: Elena;
     SRC: URL (Elena-regular.woff);
     Font-gewicht: normaal;

   @ Font-face {
     Font-familie: Elena;
     SRC: URL (Elena-Bold.woff);
     Font-gewicht: vet;
}

U kunt deze Font-familie gebruiken in uw CSS door de familienaam en het gewicht in uw selectoren te verwijzen. Dit geldt de reguliere stijl op paragrafen en de gewaagde stijl sterk Paragrafen:

 P {
  Font-familie: Elena, Serif;


p sterk {
  Font-gewicht: vet;
}

Behalve lettertype dikte @ Font-face accepteert ook de lettertype en font-stretch Eigenschap-descriptoren, die stijlen zoals cursief en gecondenseerd definiëren. Alle drie de beschrijvingen van het eigendommen kunnen worden gebruikt om een enkele font-familie met meerdere stijlen te creëren. Theoretisch, hiermee kunt u een gezin creëren dat 243 afzonderlijke stijlen bevat (negen lettertype dikte Waarden × drie lettertype Waarden × negen font-stretch waarden).

In de praktijk ben je echter beperkt tot 27 waarden, omdat sommige browsers niet ondersteunen font-stretch Bekijk de onderstaande tabel om te zien welke browsers u kunt gebruiken en kijk hier voor meer gedetailleerde informatie.

Click the icon in the top right to enlarge the image — Klik op het pictogram in de rechterbovenhoek om het beeld te vergroten

Met geluk zullen de resterende browsers de font-stretch onroerend goed binnenkort, en u kunt alle 243 lettertypenclassificaties gebruiken.

Lettertype-indelingen

De SRC Descriptor vertelt een browser waar u een lettertype-bestand krijgt. De vorige voorbeelden gebruikten een enkel lettertype-formaat, maar u ziet vaak URL's naar meerdere lettertype-indelingen in combinatie met formaathints, die zijn toegevoegd na de URL met behulp van de URL met behulp van de URL met behulp van de formaat ("waarde") syntaxis.

Opmaak Hints Vertel de browser wat het formaat van het lettertype-bestand op een gegeven URL is.

 @ Font-Face {
  Font-familie: Elena;
  SRC: URL (Elena-Regular.woff2) -indeling ("WOFF2"),
       URL (Elena-Regular.woff) -indeling ("WOFF");
}

Als u meerdere indelingen vermeldt, kiezen de moderne browsers het eerste formaat dat ze ondersteunen op basis van de indelingshint. Daarom is het belangrijk om weblettertype-indelingen in de volgorde van de beste compressie ten minste te vermelden.

Hoewel het formaat hints optioneel zijn, neemt u altijd op - ze laten de browser weten over het formaat zonder het lettertype te downloaden. Als een browser bijvoorbeeld geen WOFF2 ondersteunt, maar ondersteunt WOFF, kan het het WOFT2-lettertype-bestand overslaan op basis van de indelingshint.

Browsers ondersteunen verschillende weblettertype-indelingen: OpenType (TrueType), EOT, WOFF en WOFF2. Sommige browsers ondersteunen ook SVG-lettertypen, maar ze zijn afgeweken en mogen niet langer worden gebruikt (en mogen niet worden verward met de Nieuw OpenType-SVG-formaat

EOT, WOFF en WOFF2 zijn technisch niet lettertype-indelingen. Het zijn gecomprimeerde OpenType-bestanden met variërende mate van compressie. Woff2 biedt de beste compressie, gevolgd door WOFF en EOT.

In het onderzoeken van dekking voor alle browsers, bent u mogelijk misschien iets tegengekomen dat de kogelvrij @ Font-face syntaxis door fontspring.

De Bulletproof Syntax maakt gebruik van EOT, WOFF2, WOFF, RAW OPENTIPE en SVG-lettertypenbestanden voor maximale browser-dekking:

 @ Font-Face {
  Font-familie: Elena;
  SRC: URL (Elena.Eot? #Fix) -indeling ("embedded-opentype"),
       URL (Elena.woff2) -indeling ("WOFF2"),
       URL (Elena.woff) -formaat ("WOFF"),
       URL (Elena.OTF) -formaat ("OpenType"),
       URL (Elena.svg # Elena) -indeling ("SVG");
}

De eerste URL-lijn ziet er misschien een beetje vreemd uit. Versies van Internet Explorer 8 en onder ondersteunen de syntaxis niet voor meerdere lettertype-indelingen en behandelen de volledige waarde van de SRC eigendom als de URL.

De Bulletproof Syntax-trucs Internet Explorer 8 en onder het denken dat de resterende URL's deel uitmaken van de fragment-ID van de eerste URL. Omdat fragment-ID's worden genegeerd bij het downloaden van bestanden, gebruik Internet Explorer 8 en hieronder gewoon de eerste URL.

Andere browsers dan Internet Explorer zullen de lijn overslaan omdat ze geen EOT ondersteunen.

De rest van de vermeldingen zijn wat u zou verwachten: lettertype-indelingen vermeld in volgorde van voorkeur.

Maar is de kogelvrije syntaxis nog steeds relevant? Nee. In feite denk ik dat het schadelijk is. SVG-lettertypen worden verouderd en alleen ondersteund door browsers die niet langer in gebruik zijn.

De meeste websites ondersteunen Internet Explorer 9 en Up, maar de syntaxis lijsten EOT als het eerste favoriete lettertype-formaat. Hoewel Internet Explorer 9 en Up Support WOFF, zullen die versies het EOT-bestand nog steeds downloaden, simpelweg omdat het eerst wordt vermeld.

Omdat de meeste websites geen oude browsers meer ondersteunen, raad ik ten zeerste aan een vereenvoudigde syntaxis te gebruiken. Deze vereenvoudigde syntaxis behandelt alle moderne browsers, evenals enigszins oudere die nog in actief gebruik zijn, zoals Android 4.4 en eerder:

 @ Font-Face {
  Font-familie: Elena;
  SRC: URL (Elena.woff2) -indeling ("WOFF2"),
       URL (Elena.woff) -formaat ("WOFF"),
       URL (Elena.OTF) -formaat ("OpenType");
}

Hoewel oudere Android-versies nog steeds worden gebruikt, wordt wereldwijd afhankelijk van deze browsers zich snel afnemen. Binnenkort kunt u het RAW OPENTYPE-formaat waarschijnlijk ook laten vallen en de syntaxis nog verder vereenvoudigen:

 @ Font-Face {
  Font-familie: Elena;
  SRC: URL (Elena.woff2) -indeling ("WOFF2"),
       URL (Elena.woff) -indeling ("WOFF");
}

In dit geval zal iemand die een oudere browser draait eenvoudig uw fallback-lettertypen in plaats van het weblettertype te zien. Dat is prima; Ze kunnen de inhoud nog steeds lezen in het fallback-lettertype.

Er is een andere mogelijke waarde voor de SRC descriptor. De lokaal Functie neemt de naam van een lokale lettertypenfamilie. Als het lettertype op het systeem is geïnstalleerd, gebruikt de browser dat in plaats daarvan, waardoor een extra download wordt vermeden.

 @ Font-Face {
  Font-familie: Elena;
  SRC: Lokaal ("Elena"),
       URL (Elena-Regular.woff2) -indeling ("WOFF2"),
       URL (Elena-Regular.woff) -indeling ("WOFF");
}

Hoewel dit misschien een geweldige optimalisatie lijkt, garandeert niets dat het lokale lettertype overeenkomt met uw weblettertype.

Mogelijk krijgt u een andere versie van het lettertype, een lettertype met verschillende taalondersteuning of zelfs een heel ander lettertype. Om die reden raad ik meestal aan het gebruik van de lokaal functie tenzij u deze downsides acceptabel vindt.

Dit is een fragment van Bram Stein's Webfont-handboek , uit een boek uit elkaar. Daarin onderzoekt hij wat te overwegen bij het selecteren van weblettertypen, hoe ze effectief te gebruiken en hoe te optimaliseren voor prestaties.

Gerelateerde artikelen:

Wat is de hel blockchain?
30 chroomextensies voor webontwerpers en devs
20 Geweldige gratis Google Web-lettertypen

Web-lettertypen gebruiken

Font-families

Lettertype-indelingen

Procedures - Meest populaire artikelen

Referentiebeelden gebruiken: 13 Essentiële tips voor artiesten

Maak een old-school anaglyph-effect

10 manieren om beter karakter animaties te maken

Hoe het lettertype in uw Twitter-bio te veranderen

Maak een levensechte digitale mens

Maak gras in de onwerkelijke motor

Grow Plants in Houdini

Hoe maak je haar in Cinema 4D

Categorieën