Aangepaste lettertypen behoren tot de meest potentieel aantrekkelijke aspecten van CSS3 voor ontwerpers. Met de lettertype- regel kunt u elk lettertype dat u online heeft weergeven in uw webpaginatekst, ongeacht of de gebruiker het heeft geïnstalleerd of niet.
Zoals met de meeste CSS3-technieken, is de basiscode vrij eenvoudig, maar de praktische realiteit is iets complexer.
In deze korte zelfstudie bespreken we de basisbeginselen van het opnemen van aangepaste lettertypen op uw pagina's.
Controleer eerst of het lettertype dat u wilt gebruiken, is gelicentieerd voor gebruik op het web. Bijna alle gratis lettertypen kunnen op een website worden gebruikt en er zijn veel premium-lettertypen beschikbaar met een licentie voor webgebruik.
Upload vervolgens het door u gekozen lettertype naar uw server. Misschien wilt u het opslaan in een speciale "fonts" -directory, maar dit is optioneel.
Vergeet niet om de bestanden op te nemen voor varianten van het lettertype dat u van plan bent te gebruiken, zoals vet of cursief. U kunt EOT (Embedded OpenType) -bestanden voor Internet Explorer en OTF (OpenType) of TTF (TrueType) voor de rest gebruiken. (Extra opties zijn WOFF (Web Open Font Format) en SVG (Scalable Vector Graphics), maar we houden ons hier aan meer algemene typen.)
Noteer waar de lettertypebestanden op uw server zijn opgeslagen.
Open het HTML- of CSS-bestand voor de pagina waarmee u werkt. Voeg een lettertype- declaratie toe aan de stijlcode:
@font-face {}Eerst in het gedeelte met het lettertype, geef het lettertype een naam die u later kunt gebruiken om ernaar te verwijzen:
font-family: 'lovelyFont';Geef vervolgens, nog steeds in het gedeelte met het lettertype , de locatie van het EOT-bestand op:
src: url('fonts/lovely_font.eot');Wijzig zonodig de locatie en naam van het lettertype. Voeg vervolgens een OTF- en / of TTF-lettertype toe:
src:url('fonts/lovely_font.otf')src:url('fonts/lovely_font.ttf') Dit is de kern van de benodigde code, die in veel gevallen voldoende zal zijn. Er zijn echter aanvullende stappen die we kunnen nemen om de code betrouwbaarder te maken. Breid eerst dit gedeelte uit met een indicator van het lettertypebestandstype:
src:url('fonts/lovely_font.otf')format('opentype');src:url('fonts/lovely_font.ttf')format('truetype');Als een andere optionele efficiëntiemaatregel kunnen we ervoor zorgen dat de browser naar een lokale kopie van het lettertype zoekt in het geval de gebruiker het al heeft. Verleng uw code opnieuw als volgt en voeg de lokale sectie toe voordat u de URL opgeeft, zodat het lettertype alleen wordt gedownload als dat nodig is:
src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.ttf')format('truetype');De toevoeging is hetzelfde voor zowel OTF als TTF. We specificeren de naam van het lettertype na het lokale sleutelwoord.
In dit geval hebben we twee regels die het lokale lettertype specificeren, omdat de naam van het lettertype meer dan één woord bevat. De afbrekingstekst bevat de manier waarop lettertypenamen worden opgeslagen op bepaalde besturingssystemen - deze extra regel is niet nodig als het lettertype slechts één woord in de naam heeft. Als je weet dat een lettertype verschillende namen kan hebben op verschillende systemen, neem dan elk van de mogelijkheden op in je lokale gedeelte.
Eindelijk kunnen we het lettertype toepassen op de pagina-elementen. Geef in de CSS-code voor een bepaald element, of een groep elementen, eenvoudig de lettertypenaam op die u hebt gebruikt, inclusief eventuele fallbacks die u kiest:
div { font-family: 'lovelyFont', sans-serif; }Als u bijvoorbeeld ook een vetgedrukte versie van uw lettertype wilt gebruiken, voegt u eenvoudig een ander lettertype-face- gedeelte toe met de vetgedrukte bestand-URL en een verklaring van "font-weight: bold;". Geef het vetgedrukte lettertype op voor elk element waarop het aangepaste lettertype is toegepast en de browser geeft de vetgedrukte versie automatisch weer:
/*default version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font.eot');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');}/*bold version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font_bold.eot');src:local('Lovely Font Bold'),local('Lovely-Font-Bold'),url('fonts/lovely_font_bold.otf')format('opentype');font-weight: bold;}/*container element*/div { font-family: 'lovelyFont', sans-serif; }/*span elements inside the container div*/span { font-weight: bold; }Dat is het!
Gebruik je CSS3 om de typen gezichten uit te breiden die voor jou beschikbaar zijn? Gebruik je een service zoals Adobe's Typekit of Webfonts van Google? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, lettertypen afbeelding via Shutterstock.