Alternativer for @ Font-Face Implementation
Webfont-embedding støttes så mye av moderne nettlesere på dette tidspunktet at det er egentlig ingen unnskyldning for ikke å inkorporere dem når det er hensiktsmessig i designene dine. Det finnes hundrevis av gratis skrifttyper tilgjengelig for embedding, samt mange betalte tjenester som lar deg inkludere kommersielle skrifttyper i designene dine.
Mange designere synes det er skremt av ideen om @font-face embedding skjønt. Selv om det har blitt stadig mer populært og støttet de siste par årene, holder mange designere seg til sin vanlige samling av trygge skrifttyper for de aller fleste designene sine. Ved den sjeldne anledningen går de ut av deres komfortsone og inkluderer en web skrifttype, de går bare med en webfont abonnementstjeneste i stedet for å se på DIY-embedding eller noe som helst Google webfonter .
I denne artikkelen vil jeg gi deg alt du trenger å vite for å begynne å legge inn dine egne skrifttyper, og å begynne å bruke Google Web Fonts. Koden i seg selv er enkel, og jeg vil også bryte ned nøyaktig hvorfor vi bruker koden vi bruker. Jeg vil til og med gi deg ti gode eksempler på web skrifttypekombinasjoner som du kan implementere på dine egne motiver hvis du ikke er komfortabel med skrifttyper.
Rettferdigheter knyttet til innlemming av skrift
Det er viktig å starte med en diskusjon av de juridiske problemene som kan være tilstede når du legger inn fonter på nettstedet ditt. Ikke alle skriftene er lisensiert for den typen bruk, spesielt kommersielle skrifttyper. Noen krever utvidede lisenser, mens andre forhindrer øvelsen alt sammen (eller selg en tjeneste for å håndtere embedding for deg).
Det er viktig å sjekke EULA for hvilke fonter du planlegger å bruke for å være sikker @font-face innlemming er tillatt. Hvis ikke, må du enten velge en annen skrifttype, finne ut om det er en separat lisens du kan kjøpe, eller se om en av webtypetjenestene der ute, inneholder din skrifttype.
Alternativer for embedding
Innføyning av skrifter med @font-face er ikke spesielt komplisert, men det er en multi-trinns prosess. Det er et par forskjellige måter å gjøre dette på, inkludert noen gratis og betalte tjenester, samt en fullstendig DIY-metode.
DIY embedding
For de beste resultatene og den mest omfattende nettleserstøtten, vil du bruke et verktøy som Font Equirrel's @font-face Generator. Dette gratis verktøyet lar deg laste opp en hvilken som helst skrifttype du har riktige tillatelser for og konverterer den til de forskjellige støttede skriftfiltypene for forskjellige nettlesere.
Når du har din skriftpakke, vil du laste den opp til serveren din, sannsynligvis i en katalog som heter "fonter" eller noe lignende. Når det er lastet opp, går du inn på nettstedets CSS og inkluderer følgende kode:
@font-face {font-family: "Dancing Script";src: url("fonts/DancingScript.eot");src: local("#"),url("fonts/DancingScript.ttf") format("truetype"),url("fonts/DancingScript.woff") format ("woff"),url("fonts/DancingScript.svg") format ("svg");}Line-by-line, dette bryter ned som følger:
font-family: "Dancing Script";
Denne delen spesifiserer skriftnavnet slik at vi kan ringe det senere i våre stiler.
src: url("fonts/DancingScript.eot");
EOT-filer støttes av Internet Explorer 4.0 og nyere. Uten denne filen, din @font-face implementeringen vil ikke fungere i IE-versjoner eldre enn 9,0.
src: local("#"),
Denne linjen forhindrer at en lokal skrift lastes inn, hvis en finnes. Mens noen programmerere foretrekker å ha den lokale skriftbelastningen for å spare båndbredde, kan potensialet for at det forårsaker problemer oppveie fordelene. Hvis noen har en annen versjon av skrifttypen installert lokalt (eller en dårlig piratkopiert versjon), kan det ha en drastisk innvirkning på hvordan designen ser ut. Etter min mening er det bedre å spille det trygt og opprettholde full kontroll over nøyaktig hvilke skriftlaster.
url("fonts/DancingScript.ttf") format("truetype"),
TrueType-skrifter er kompatible med Mozilla 3.5+, Safari 3.1+, Opera 10+ og Chrome 2.0+.
url("fonts/DancingScript.woff") format ("woff"),
Denne .woff-filen tar seg av IE 9+, Mozilla 3.6+, Safari 5.1+, Opera Presto og Chrome 5.0+.
url("fonts/DancingScript.svg") format ("svg");
Dette siste formatet tar seg av Safari 3.1+, Opera 9+ og Chrome 0.3+. SVG er også nødvendig for iPad og iPhone Safari, som det for øyeblikket ikke vil fungere med andre skriftformater.
Bruk av flere formater av skrifter er viktig for maksimal nettleserkompatibilitet. Vi har slått ut OpenType (otf) skrifter her, fordi de ikke legger til noen kompatibilitet som ikke eksisterer med TrueType-skrifter (og TrueType-skrifter er kompatible med Chrome, mens OpenType-skrifter ikke er).
Nå, når du er klar til å ringe skrift i CSS, behandler du den akkurat som en vanlig nettsikker skrifttype.
h1 { font: 24px "Dancing Script", "Times New Roman", serif; }
Pass på at du spesifiserer tilbakebetalingskonfonter, slik at hvis nettfonten ikke av en eller annen grunn laster inn (eller brukeren bruker en ikke-støttet nettleser), har du likevel litt kontroll over hvordan nettstedet ser ut. Hvis du ikke gjør det, vil standard skrifttype lastes, og altfor ofte er det en monospaced skrifttype som Courier New.
Google Web Fonts API
Bare noen få måneder siden, den Google Web Fonts API bare inkludert et par dusin fonter. Det var flott hvis skrifttypen du skjedde å ønske å bruke var inkludert, men ellers var det ikke så mye praktisk bruk. Det er endret.
Google vert nå flere enn 230 skriftfamilier, mange med flere stiler eller vekter. Og de er alle gratis å bruke. Dette er en flott ressurs for designere som vil bruke webfonter, men ønsker ikke nødvendigvis å være vert for deres skrifttyper selv (muligens på grunn av båndbreddeproblemer).
Google tilbyr tre forskjellige metoder for inkluderte skrifter: en standardmetode, som bruker en lenke til et CSS-stilark i din head , en @import metode, og en JavaScript-metode.
Uansett hvilken du bestemmer deg for å bruke, trenger du ikke å registrere deg for noen spesiell konto, og gripende skrifttyper er en engangs prosess (bare finn skrifttypen du vil ha, og klikk deretter på "Hurtig bruk" for å få tak i kode).
Font Services
Det finnes en rekke andre fonttjenester, for eksempel Typekit og Fonts.com webfonter , hvorav de fleste er abonnementsbaserte. Deres gebyrer varierer ganske mye, som deres vilkår. Vi dekket dem mer detaljert i en forrige innlegg .
Hovedgrunnen til å bruke en av disse tjenestene er når det som skrives ut (eller må brukes på grunn av kundespesifikasjoner) ikke er lisensiert for regelmessig @font-face embedding, men er tilgjengelig gjennom en av disse tjenestene. Siden noen av tjenestene er levert av typen støperier selv, er det et bredere utvalg tilgjengelig.
For det meste fungerer disse tjenestene på samme måte som Google Web Fonts API så langt som innebygd går, men hver har sin egen spesifikke metode. En annen fordel er at du får støtte hvis du har problemer med å legge inn eller bruke skriftene.
Når skal du bruke @ font-face
På grunn av relativt utbredt støtte, @font-face kan brukes på praktisk talt alle nettsteder. Det er en fin måte å skille ut en ellers enkel og ren design fra millioner av andre enkle og rene design der ute. Det kan også legge til ekstra karakter for mer visuelt komplekse design. Det er egentlig ingen unnskyldning for ikke å bruke en flott skrift for i hvert fall overskriftene på nettsteder du designer.
Selvfølgelig kan alle disse nye alternativene være veldig skremmende for designere som ikke er ekspert typografer. Men heldigvis er det mange ressurser der ute for å kombinere skrifttyper som kan hjelpe deg med å komme opp med dine egne kombinasjoner. I mellomtiden er det ti kombinasjoner du kan bruke akkurat nå, bestående av gratis skrifttyper fra enten Font Ekorre eller Google Web Fonts API.
Awesome webfontkombinasjoner
Hvis du ikke er sikker på hvor du skal begynne å kombinere skrifttyper, kan du prøve disse kombinasjonene på størrelse.
Tegneserie nettsted
Nå er det absolutt ingen unnskyldning for å bruke Comic Sans på et nettsted!
Komika Tittel | Colaborate Light | Komika Tekst
Klassisk, elegant sted
Denne kombinasjonen er klassisk og elegant, men kombinert med riktig bakgrunn og fargevalg, kan det også virke friskt og moderne.
Dancing Script | Droid Serif | Droid Sans
Grunge nettsted
Grunge-typen er best igjen til titlene, men det betyr ikke at du også kan finne noen flotte skrifttyper for din andre tekst.
Copystruct | cicle | miso
Enkelt og rent sted
Enkel og ren pleide å bety Helvetica. Ikke nå lenger.
Oswald | Skuespiller | Terminaldoselyse
Mer grunge
Her er et annet alternativ for grunge stil nettsteder. Dette vil også fungere godt på et illustrert nettsted.
FFF TUSJ | bråkmaker | Perspektiv Sans
Retro site
Denne kombinasjonen skriker midt i Amerika.
Yellowtail | Josefin Sans Semi-Bold 600 | Rokkitt
Femininsted
Feminin trenger ikke nødvendigvis å være lik sjenerøs. Detaljer på disse skrifttypene gir en feminin berøring uten å være klumpete.
Leckerli One | snippet | Amaranth
Funky og moderne område
Funky skrifttyper legger til mye karakter. Bare vær sikker på at du holder lesbarhet i tankene.
Formelt sted
Et mer formelt nettsted krever mer formell typografi. Her er en kombinasjon av et formelt skript med tradisjonelle serif og sans serif skrifttyper.
Tangerine | Crimson Text | Rosario
Unike og moderne steder
En annen unik, funky skrifttype paring. Kontrasten mellom de skarpe vinklene i tittelen og kroppsfonter med de avrundede kantene på meta fonten er en fin touch og legger stor interesse.
geostar | Kelly Slab | Comfortaa
Konklusjon
Som det allerede er nevnt, er det egentlig ingen unnskyldning for ikke å jobbe med @font-face lenger. Reglene for god typografi gjelder fortsatt, og alt du vet om å kombinere websafe fonter overfører. Du har bare flere alternativer nå!
Hvor ofte bruker du @ font-face i dine egne prosjekter? Gjør du DIY eller bruker du en tjeneste? Del dine erfaringer og tips i kommentarene!