Share
In de afgelopen vijf jaar heeft typografie op het web nogal een gezichtsveld aangenomen (sorry, woordspeling bedoeld). Vroeger waren webontwerpers beperkt tot het gebruik van alleen webveilige lettertypen; systeemlettertypen beschikbaar op alle computers van gebruikers. Zoals je je kunt voorstellen (of ervaren uit de eerste hand), was dit frustrerend voor ons, typte freaks, maar we hebben het behandeld. Op een rare manier was het echter leuk omdat je een beperkte reeks lettertypen had om uit te kiezen, dus de tijd besteed aan het kiezen van het perfecte lettertype was minimaal (ik klaag niet). Nu is echter een lettertype dat specifiek is voor het uiterlijk dat u wilt bereiken mogelijk, en bedrijven kunnen nu hun visuele merktaal via typografie projecteren..
Dus er kwamen een paar methoden om het type te dienen op onze websites, waarvan de meest gebruikte is @ font-face. Deze CSS-regel geeft ons de mogelijkheid lettertypen van een server te downloaden en deze te gebruiken op onze verbluffende webpagina's. Aanvankelijk was de browserondersteuning minimaal, maar deze wordt nu breed ondersteund. De enige opmerkelijke uitzondering is Opera Mini (kom op jongens).
@ font-face is een CSS-regel die de naam van het lettertype, de locatie en het lettertype-gewicht specificeert. In het onderstaande vereenvoudigde voorbeeld wordt het lettertype opgeslagen op font-face.com en wordt het specifieke pad gedefinieerd. Het zou er ongeveer zo uit kunnen zien:
Accentsconagua
@ font-face font-family: 'DeliciousRoman'; src: url ('http://www.font-face.com/fonts/delicious/Delicious-Roman.otf'); font-weight: 400; U kunt zien dat de naam van het lettertype is ingesteld op "DeliciousRoman". Dit is de lettertypenaam waarnaar dan wordt verwezen in onze CSS-lettertypestack, samen met fallback-lettertypen als het lettertype niet wordt geladen:
.voorbeeld font-family: 'DeliciousRoman', Arial, sans-serif;
De dingen zijn echter niet zo eenvoudig. Aangezien verschillende browsers verschillende lettertypeformaten vereisen, moeten we er zeker van zijn dat we alle opties bieden die nodig zijn.
Hier is een lijst met browsers, samen met de bestandstypen die ze ondersteunen:
Er zijn verschillende conventies binnen @ font-face om het probleem van browsercompatibiliteit aan te pakken. Het is goed om te weten hoe @ font-face is geëvolueerd en de volgende korte geschiedenis biedt koppelingen naar een solide hoeveelheid informatie over het onderwerp.
Paul Irish kwam in 2009 met de syntaxis van Bulletproof @ font-face. In de loop der jaren zijn er een paar hacks verschenen om het probleem van browsercompatibiliteit aan te pakken, waarvan de meest controversiële de smiley-hack is..
Een andere versie kwam uit genaamd de Mo 'Bulletproofer Syntax door Richard Fink, het aanpakken van lettertype problemen die zich voordeden in Android.
Ten slotte zijn we aangekomen bij de syntaxis FontSpring @ font-face. Deze benadering vereenvoudigt een groot deel van de taal en ziet er als volgt uit:
@ font-face font-family: 'DeliciousRoman'; src: url ('fonts / DeliciousRoman-webfont.eot? #iefix') formaat ('embedded-opentype'), url ('fonts / DeliciousRoman-webfont.woff') formaat ('woff'), url ('fonts / DeliciousRoman-webfont.ttf ') formaat (' truetype '), url (' fonts / DeliciousRoman-webfont.svg # svgDeliciousRoman ') formaat (' svg '); In het bovenstaande voorbeeld ziet u dat de lettertypen zelf worden gehost en worden opgeslagen op de server in een map met de naam "fonts".
Font Squirrel (en een paar andere) bieden een handige webfont-generator die elk lettertype in een set met webbestanden converteert voor insluiting. In de kit vind je alle benodigde lettertypebestanden, de specifieke syntaxis van @ font-face CSS en een HTML-demo. U kunt de lettertypebestanden vervolgens direct op uw server plaatsen en het pad in de CSS-code van @ font-face aanpassen.
Notitie: Eerlijke waarschuwing, zorg er wel voor dat je voldoende rechten hebt om lettertypen te gebruiken die je door de generator loopt en gebruik op je site.
Afhankelijk van of je zelf host of een font-service gebruikt zoals Typekit (hier later meer over), zou je CSS er een beetje anders uitzien. Met een service als Typekit maakt u bijvoorbeeld 'kits' met lettertypen die alle lettertypen bevatten die u voor elke specifieke website zult gebruiken. Voor elke kit die u maakt, krijgt u een JavaScript-fragment te zien in de van uw HTML-document. Dit fragment laadt de juiste @ font-face-regels voor die specifieke browser.
Voor meer informatie over waarom TypeKit JavaScript gebruikt, lees Beter laden van weblettertypen met JavaScript.
In de set-instellingen van fonts.com vindt u drie verschillende publicatie-opties met premium lidmaatschapsabonnementen. Naast een javascript-optie die vergelijkbaar is met Typekit, bieden ze ook een niet-JavaScript-optie die linkt naar een weergegeven stylesheet en een zelf-gehoste optie. Afhankelijk van wat je kiest, zal je CSS er duidelijk iets anders uitzien.
Zoals u zich kunt voorstellen, wordt lettertypelicentie een groot probleem bij het gebruik van lettertypen op internet. Het wijdverspreide gebruik van @ font-face heeft de explosie van gratis lettertypen tot gevolg gehad, waarvan sommige echt goed zijn, sommige niet. Font Squirrel, Fontex en DaFont zijn een paar van de bekendere opties voor gratis lettertypen. Lost Type Coop is een andere geweldige plek om lettertypen op te halen, geaccepteerde donaties. Google Fonts biedt ook een enorme selectie gratis lettertypen, hoewel sommige naar mijn mening van slechte kwaliteit zijn.
De industrie voor het hosten van lettertypen is de afgelopen jaren met grote sprongen gegroeid. Met lettertyphosting kunt u een licentie verlenen voor sommige van uw favoriete lettertypen - en in veel gevallen betere kwaliteit dan gratis lettertypen - voor gebruik op internet. Typekit was een van de eerste grote spelers op deze markt en heeft een erg mooie selectie van lettertypen. In de loop van de tijd hebben ze een aantal beter bekende lettertypen zoals Futura en Meta toegevoegd en verschillende lettertypen goed bekend gemaakt in de webwereld.
Fonts.com biedt licenties voor zijn bibliotheek van meer dan 150.000 lettertypen, die enkele van de meest populaire lettertypen ter wereld bevat, zoals Avenir, Frutiger, Univers en Din om er maar een paar te noemen. Deze service heeft een paar unieke functies die ik erg leuk vind: afhankelijk van welk lidmaatschapsniveau je hebt, integreert het SkyFonts, waardoor je in principe lange tijd fonts kunt huren, meestal in stappen van één of dertig dagen. Hiermee kunt u het lettertype in bureaubladtoepassingen gebruiken voor mockup-doeleinden. Bovendien kunt u met een premiumlidmaatschap de lettertypekit downloaden en uw eigen lettertypen zelf hosten, waardoor de laadtijden langer worden.
Een van de gloednieuwe diensten die we de laatste tijd behoorlijk hebben aangewakkerd, is de lancering van cloud-typografie door HF & J. HF & J wordt algemeen beschouwd als de autoriteit op typografie en hun lettertypen doen die reputatie eer aan. Een webaanbieding van deze kerels is langverwacht omdat ze elk van hun lettertypen opnieuw hebben ontworpen voor het scherm. Ze hebben de lat behoorlijk verhoogd en 9pt gemaakt. Gotham leesbaar op scherm. Het is echt geweldig.
Ze hebben een handige interface boordevol geweldige functies, zoals het selecteren van alleen de tekens in een lettertype dat u nodig hebt, wat op zijn beurt ruimte bespaart en de laadtijd verhoogt. Zeker de moeite waard om te gaan bekijken.
De prijsstructuur voor lettertype-hostingservices varieert, maar de meeste zijn gebaseerd op paginaweergaven voor elke site waarop u hun lettertypen gebruikt. Daarnaast hebben veel services zoals fonts.com verschillende prijsniveaus die verschillende add-ons bieden, zoals desktoplettertypen, mock-up lettertypen en zelfhostingopties. Het is het beste om te zien wat er beschikbaar is en de service en het abonnement te kiezen die bij uw behoeften passen.
Dus is het beter om een font hosting-service te gebruiken of om zelf te hosten? Het hangt er vanaf. Hier zijn een paar voordelen van elk:
Hosting Service (zoals TypeKit, Fonts.com, HF & J)
Zelf hosting
Houd er rekening mee dat u op de hoogte moet zijn van het aantal lettertypen dat u gebruikt. Als het op prestaties aankomt, betekent meerdere gewichten van hetzelfde lettertype dat u een ander geheel lettertype laadt. Wees dus voorzichtig, want hoe meer lettertypen u gebruikt, hoe langer de laadtijd. Je zult een aantal alarmen uitschakelen op TypeKit zodra je set meer dan 500.000 is, maar minder is meer in dit geval.
Goed gedaan, je bent nu opgeleid in de basis van @ font-face en de vele manieren waarop het kan worden gebruikt! Zorg ervoor dat u op de hoogte blijft van de nieuwe hulpmiddelen en methoden voor het integreren van lettertypen op internet. Net als met alles op het web, verandert het snel!
