Share
I denne artikkelen tar vi en titt på noen av de mest populære webtypetjenester, sammenligner funksjoner mellom dem og snakker om noen av de røde flaggene som er involvert i å jobbe med ekte skrifttyper på nettet.
Vi er en heldig gjeng, vi webdesignere av nåtiden. Webdesignerne fra yesteryear har lenge slitt med et frustrerende lite utvalg av skrifttyper - de web-sikre systemfonter som ble testet og testet for bruk på skjermen. Du kjenner navnene sine. Georgia, Times New Roman, Arial, Verdana - nesten alle av dem sender en liten shudder nedover våre ryggrader.
Men ikke nå lenger. Nettskriften er her! CSS3 har hentet ekte webfonter til vårt bruksbelt, med kraften til @ font-face. Men med denne nye teknologien kommer et overveldende ansvar - hodepine som er lisensiering av skrifter for bruk på nettet. Flere og flere støperier leverer skrifttyper med lisens til bruk på nettet, men da serverer skriftene deg selv og sikrer kompatibilitet på tvers av enheter og nettlesere, kan det være en annen verden av smerte på egen hånd.
Det er der web font tjenester kommer inn. De håndterer hovedparten av lisensiering og hosting arbeid, slik at du gjør det du gjør best - bygge fantastiske og vakre nettsteder.
Jeg snakker om tre av de mest populære webfontene her. Nemlig, Typekit
Fontdeck
og Google webfonter.
Alle disse tjenestene vert fontene dine på sine egne servere, og håndterer alle lisensnøkkelene som følger med dem - så du kan bare plugge og spille uten bekymringer.
Disse tjenestene bruker ikke alle samme teknikk for å legge inn fonter. Fontdeck og Google Web Fonts begge tillater deg å bruke en tagg for å ta tak i skriftene direkte for å bruke dem på nettstedet ditt, mens Typekit har en annen tilnærming. Typekit krever at du inkluderer en utdrag av JavaScript på nettstedet ditt som tar tak i nødvendige ressurser for deg ved utførelse.
Å bruke en tag har et par åpenbare fordeler. For en ting krever denne metoden ikke at brukeren har JavaScript aktivert. I tillegg vil skriptet som Typekits kode genererer resultere i minst 2 flere http-forespørsler - ett for et annet skript, og et sekund for CSS-filen som gripes av nevnte skript. Dette er noe som Fontdeck og Google ikke trenger å lide gjennom.
Typekit har imidlertid en betydelig fordel ved å bruke et skript i stedet for vanlig gammel CSS - the wf- * klasser.
Accentsconagua
wf- * klasserNår nettstedet ditt ber om fonter fra Typekits servere via JavaScript-koden, skjer noe litt fantastisk - skriptet vil legge til klasser til HTML-elementet på nettstedet ditt, avhengig av statusen til forespørselen for fonter.
Klassene er wf-lasting, wf aktive, og wf-inaktive. Hva betyr dette for oss? Vel, disse klassene kan hjelpe oss med å forhindre feil - blitsen av ustabil tekst som vises som våre webfonter lastes inn. Ved å utforme våre sider på riktig måte når fonter lastes, kan vi forhindre den ødeleggende effekten som FOUT kan ha for brukeren. Sjekk denne siden for et eksempel - mens skrifttyper lastes, blir en klasse med wf-lasting påført html-taggen.
Ved hjelp av CSS kan vi gjemme alt innholdet og vise en lastingsanimasjon for å gjøre det klart for brukeren at noe skjer. Når fonter er ferdig lastet, kan vi gradvis forsvinne innholdet vårt tilbake i visningen. Google Web Fonts lar deg også bruke et skript hvis du ønsker fordelene med disse klassene. Faktisk var skriptet bak disse klassene et samarbeid mellom Google og Typekit.
Hver av disse tjenestene vedtar en annen prismodell. Google Web Fonts er helt gratis. Du kan til og med laste ned skrifter for lokal bruk på datamaskiner, noe som er flott hvis du prøver å bygge konsistent merkevarebygging med typografi.
Typekit har flere forskjellige prisnivåer, alt fra en gratis plan til $ 99 per år. Den frie planen har et begrenset antall skrifter, tillatt på bare ett nettsted, og krever at du viser et Typekit-merke på nettstedet ditt. Alle betalte planene lar deg fjerne dette merket, og lar deg bruke opprette flere nettsteder og bruke flere fonter jo mer du betaler. For mer informasjon om deres prisplaner, sjekk deres nettside.
Fontdeck vedtar en annen prismetode. De tar betalt per skrifttype, med skrifttyper (ved skrivingstid) som varierer i pris fra $ 2,50 per år oppover, men koster vanligvis rundt $ 7,50 per år.
En viktig bekymring når du bruker webfonter, er hvordan de vises over det store utvalget av enheter, nettlesere og plattformer. Dessverre er det ingen måte å sikre at våre nettsider ser ut akkurat det samme på en enhet som de gjør på en annen - vi vet at det er OK skjønt. Likevel kan vi gjøre med litt berolighet om hvor godt skriftene vil gjengi.
Heldigvis vet våre webfontjenester at dette er en stor avtale. De gir alle skjermbilder av hvordan skrifttypen gjøres i alle de populære nettleserne, inkludert IE6 og opp, Google Chrome, Safari, Firefox og Opera. Vanligvis gir nettskrifter helt fint i alle tilfeller. Enkelte lysere ansikter kan virke skyggete i Windows, men det er bare ned til Windows-fontgengivelsen - ikke mye vi kan gjøre der.
En ting å være klar over når du bruker webfonter på nettstedene dine, er CSS-tekstgjenvinningsegenskapen. Denne egenskapen lar deg bruke OpenType-funksjoner som ligaturer og kerning, men til en stor pris. I WebKit-nettlesere på Linux-distribusjoner, og i Chrome på Windows med noen skrifter, kan bruk av denne egenskapen føre til noen merkelige bivirkninger ved håndtering av inline-tekstelementer.
Med dette i tankene er det sannsynligvis en god ide å fjerne denne (for tiden eksperimentelle) eiendommen. I tillegg på den lyse siden implementerer Firefox ikke bare eiendommen riktig, men har også ligaturer og kerning aktivert som standard.
Så, vi vet om de forskjellige tjenestene og forskjellene mellom hvordan de fungerer, så vel som noen av de røde flaggene som er involvert i bruk av webfonter på våre nettsteder - men hvordan begynner vi faktisk å bruke dem?
Et spesielt nyttig verktøy for å få hendene skitne med webfonter er Typecast.
Typecast gir deg mulighet til å teste alle nettskrifter som er tilgjengelige fra alle disse tjenestene, i et ekte webmiljø, hvor du også kan legge til tilpasset CSS, definere bredder for elementer - hele settet og kaboodle. CSS som Typecast produserer for bruk på ditt eget nettsted, er mindre enn ønskelig - skriftstørrelser, linjehøyder og marginer angitt i piksler, ikke ems. Men det er fortsatt et utrolig nyttig verktøy for å se hvordan disse skriftene vil se på den virkelige web.
Hvis du finner deg selv manglende inspirasjon for hvordan du bruker webfonter, er Typekit bloggen alltid chock-a-block med inspirerende nettsteder, samt noen fascinerende innsikt i teknologien bak webfonter. Det finnes også nettsteder som Lost World's Fair, Just My Type (fra ditt eget) og Good Web Fonts, der du kan se den virkelige kraften og skjønnheten til ekte skrifttyper på nettet. Elliot Jay Stocks 'nettsted er alltid et virkelig inspirerende nettsted som viser webfonter også. (Du kan kanskje fortelle - jeg elsker dette.)
Når det gjelder å faktisk bruke tjenestene, kan de ikke være enklere. Google Web Fonts er veldig mye bare plug and play - finn en skrifttype du liker, klikk "quick-use", og velg deretter skrifter og variasjoner du trenger. Du får en kobling du kan bruke på webområdet ditt eller i CSS-filen din via @import, eller en javascript-kode som du kan bruke til å utnytte "wf- *" -klassene.
Fontdeck lar deg teste fonten på noen datamaskiner før du kjøper den for utbredt bruk på nettstedet ditt. Bare velg skrifttypen du liker, og de vil gi deg en link du kan bruke på nettsidene. Test det ut på noen få datamaskiner ved å legge til deres IP-adresser på nettstedet på Fontdeck, så når du er fornøyd med det, kan du bare kjøpe skrifttypen for ubegrenset bruk.
Typekit har en gratis plan som lar deg bruke et ganske omfattende bibliotek med fonter gratis, under forutsetning av at du viser et merke på nettstedet ditt som annonserer det faktum at du bruker Typekit. Det er egentlig ikke et dårlig utseende lite merke, men hvis du vil ha det gått, må du betale for en plan.
Porteføljeplanen er utrolig omfattende, med få begrensninger, og den er priset til en rimelig $ 49,99 per år, eller hvis du har Adobe Creative Cloud, får du porteføljeplanen inkludert. For å bruke Typekit på nettstedet ditt, oppretter du ganske enkelt et "kit" - et kollekit av skrifter for bruk på domener du angir. Kopier javascript-kodebiten til websidene dine, legg til noen fonter i settet, velg vektene og variasjonene du trenger, og husk å treffe "publiseringssett". Noen ganger kan Typekits servere ta litt tid å reflektere endringer, så gi det noen minutter før du oppdaterer nettstedet ditt.
Siden juli 2012 har Typekit tilbudt forbedret innlemming av JavaScript.
Denne nye innlejringsmetoden øker ytelsen, tilbyr protokollrelaterte nettadresser og valgfri (offisiell) asynkron lasting. Asynkron lasting gjør at fonter kan trekkes inn på en side, uten å blokkere køen for andre eiendeler hvis det skulle oppstå problemer.
Med noe hell er du nå bevæpnet med nok informasjon om web skrifttype tjenester for å dykke inn og gjøre opp ditt eget sinn. Hvilke av disse systemene og funksjonene foretrekker du? Har du erfaring med noen av tjenestene? Råd og pekere du vil dele? Gi oss beskjed i kommentarene!
