Valg til @ Font-Face Implementation
Webfont embedding understøttes så bredt af moderne browsere på dette tidspunkt, at der virkelig er ingen undskyldning for ikke at inkorporere dem, når det er hensigtsmæssigt i dine designs. Der er hundredvis af gratis skrifttyper til rådighed for indlejring, samt masser af betalte tjenester, der giver dig mulighed for at inkludere kommercielle skrifttyper i dine designs.
En masse designere synes at være skræmt af ideen om @font-face indlejring dog. Selvom det er blevet mere og mere populært og støttet i de sidste par år, holder mange designere stadig deres sædvanlige samling af webbaserede skrifttyper til de fleste af deres designs. Ved den sjældne lejlighed træder de ud af deres komfortzone og omfatter en web skrifttype, de går bare med en webfont abonnementstjeneste i stedet for at se på DIY indlejring eller noget lignende Google Web Fonts .
I denne artikel vil jeg give dig alt, hvad du behøver at vide for at begynde at indlejre dine egne skrifttyper, og at begynde at bruge Google Web Fonts. Koden i sig selv er enkel, og jeg vil også nedbryde præcis, hvorfor vi bruger koden vi bruger. Jeg vil endda give dig ti gode eksempler på web skrifttypekombinationer, som du kan implementere på dine egne designs, hvis du endnu ikke er komfortabel med skrifttyper.
Retlige forhold forbundet med indlejring af skrifttyper
Det er vigtigt at starte med en diskussion af de juridiske problemer, der kan være til stede, når indlejring af skrifttyper på din hjemmeside. Ikke alle skrifttyper er licenseret til den slags brug, især kommercielle skrifttyper. Nogle kræver udvidede licenser, mens andre forhindrer praksis sammen (eller sælger en tjeneste til at håndtere indlejring til dig).
Det er vigtigt at kontrollere EULA for hvilke skrifttyper du planlægger at bruge for at sikre dig @font-face indlejring er tilladt. Hvis ikke, skal du enten vælge en anden skrifttype, finde ud af om der er en separat licens, du kan købe, eller se, om en af webtypetjenesterne derude indeholder din valgte skrifttype.
Indstillinger for indlejring
Indlejring af skrifttyper med @font-face er ikke særlig kompliceret, men det er en multi-trin proces. Der er et par forskellige måder at gøre dette på, herunder nogle gratis og betalte tjenester samt en komplet DIY-metode.
DIY indlejring
For de bedste resultater og den mest omfattende browser support, vil du gerne bruge et værktøj som Font Equirrel's @font-face Generator. Dette gratis værktøj giver dig mulighed for at uploade enhver skrifttype, du har passende tilladelser til og konverterer den til de forskellige understøttede skrifttype filtyper til forskellige browsere.
Når du har din skrifttypepakke, skal du uploade den til din server, sandsynligvis i en mappe kaldet "skrifttyper" eller noget lignende. Når det er uploadet, går du ind på dit websteds CSS og indeholder 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 bryder ned som følger:
font-family: "Dancing Script";
Denne del angiver skrifttypens navn, så vi kan kalde det senere i vores stilarter.
src: url("fonts/DancingScript.eot");
EOT-filer understøttes af Internet Explorer 4.0 og nyere. Uden denne fil, din @font-face implementeringen vil ikke fungere i IE versioner ældre end 9.0.
src: local("#"),
Denne linje forhindrer en lokal skrifttype i at blive indlæst, hvis en findes. Mens nogle programmører foretrækker at have den lokale skrifttypebelastning for at spare båndbredde, kan potentialet for at forårsage problemer opveje fordelene. Hvis nogen har en anden version af skrifttypen installeret lokalt (eller en dårlig piratkopieret version), kan det have en drastisk indvirkning på hvordan dit design ser ud. Efter min mening er det bedre at spille det sikkert og opretholde fuld kontrol over præcis hvilke skrifttypeindlæser.
url("fonts/DancingScript.ttf") format("truetype"),
TrueType-skrifttyper er kompatible med Mozilla 3.5+, Safari 3.1+, Opera 10+ og Chrome 2.0+.
url("fonts/DancingScript.woff") format ("woff"),
Denne .woff-fil vil tage sig af IE 9+, Mozilla 3.6+, Safari 5.1+, Opera Presto og Chrome 5.0+.
url("fonts/DancingScript.svg") format ("svg");
Dette endelige format tager sig af Safari 3.1+, Opera 9+ og Chrome 0.3+. SVG er også nødvendigt for iPad og iPhone Safari, da det i øjeblikket ikke virker med andre skrifttypeformater.
Brug af flere formater af dine skrifttyper er vigtigt for maksimal browser kompatibilitet. Vi har udeladt OpenType (otf) skrifttyper her, fordi de ikke tilføjer nogen kompatibilitet, der ikke findes med TrueType-skrifttyper (og TrueType-skrifttyper er kompatible med Chrome, mens OpenType-skrifttyper ikke er).
Nu, når du er klar til at kalde skrifttypen i dit CSS, behandler du det som en almindelig websikker skrifttype.
h1 { font: 24px "Dancing Script", "Times New Roman", serif; }
Sørg for, at du angiver tilbagesendelsesfonter, så hvis web skrifttypen for en eller anden grund ikke indlæser (eller din besøgende bruger en ikke-understøttet browser), har du stadig en vis kontrol over, hvordan webstedet ser ud. Hvis du ikke gør det, bliver standard skrifttypen indlæst, og alt for ofte er det en monospaced skrifttype som Courier New.
Google Web Fonts API
For kun et par måneder siden, den Google Web Fonts API kun inkluderet et par dusin skrifttyper. Det var godt, hvis skrifttypen du skete med at bruge, var inkluderet, men ellers var det ikke meget praktisk brug. Det er ændret.
Google er nu vært for mere end 230 skrifttypefamilier, mange med flere stilarter eller vægte. Og de er alle gratis at bruge. Dette er en stor ressource for designere, der ønsker at bruge web skrifttyper, men ikke nødvendigvis vil være vært for deres skrifttyper selv (muligvis på grund af båndbredde problemer).
Google tilbyder tre forskellige metoder til inkluderede skrifttyper: en standardmetode, som bruger et link til et CSS-stilark i din head , en @import metode og en JavaScript-metode.
Uanset hvilken du vælger at bruge, behøver du ikke tilmelde dig en særlig konto, og gribende skrifttyper er en one-step-proces (bare find den skrifttype, du vil have, og klik derefter på "Hurtig brug" for at få den kode).
Font Services
Der er en række andre fonttjenester, f.eks Typekit og Fonts.com Web Fonts , hvoraf de fleste er abonnementsbaserede. Deres gebyrer varierer temmelig bredt, ligesom deres vilkår. Vi dækkede dem mere detaljeret i en forrige indlæg .
Hovedårsagen til at bruge en af disse tjenester er, at når som helst skrifttype, du vil bruge (eller skal bruge på grund af kundespecifikationer) ikke er licenseret til regelmæssig @font-face indlejring, men er tilgængelig via en af disse tjenester. Da nogle af ydelserne leveres af type støberier selv, er der et bredere udvalg til rådighed.
For det meste fungerer disse tjenester på samme måde som Google Web Fonts API for så vidt angår indlejring, men hver har deres egen specifikke metode. En anden ekstra fordel er, at du får support, hvis du har problemer med indlejring eller brug af skrifttyperne.
Hvornår skal du bruge @ font-face
På grund af relativt udbredt støtte, @font-face kan bruges på stort set alle hjemmesider. Det er en fantastisk måde at opdele et ellers simpelt og rent design fra millioner af andre enkle og rene design derude. Det kan også tilføje ekstra karakter til mere visuelt komplekse designs. Der er virkelig ingen undskyldning for ikke at bruge en stor skrifttype til i hvert fald overskrifterne på websteder, du designer.
Selvfølgelig kan alle disse nye muligheder være meget skræmmende for designere, der ikke er ekspert typografer. Men heldigvis er der masser af ressourcer derude for at kombinere skrifttyper, der kan hjælpe dig med at komme op med dine egne kombinationer. I mellemtiden er nedenstående ti kombinationer, du kan bruge lige nu, der består af gratis skrifttyper fra enten Font Ekorre eller Google Web Fonts API.
Awesome webfontkombinationer
Hvis du ikke er sikker på, hvor du skal begynde at kombinere skrifttyper, skal du prøve disse combos på for størrelse.
Tegneserie site
Nu er der absolut ingen undskyldning for altid at bruge Comic Sans på et websted!
Komika Titel | Colaborate Light | Komika Tekst
Klassisk, elegant sted
Denne kombination er klassisk og elegant, men kombineret med den rigtige baggrund og farveskema kan den også virke frisk og moderne.
Dancing Script | Droid Serif | Droid Sans
Grunge site
Grunge-typen er bedst overladt til titlerne, men det betyder ikke, at du heller ikke kan finde nogle flotte skrifttyper til din anden tekst.
Copystruct | cicle | miso
Enkelt og rent sted
Enkel og ren plejede at betyde Helvetica. Ikke mere.
Oswald | Skuespiller | Terminal Dosis Light
Mere grunge
Her er et andet alternativ til grunge stil websteder. Denne ville også fungere godt på et illustreret sted.
FFF TUSJ | Brawler | Perspektiv Sans
Retro site
Denne kombination skriger mellem århundredes Amerika.
Yellowtail | Josefin Sans Semi-Bold 600 | Rokkitt
Femininsted
Feminin behøver ikke nødvendigvis at være lige så lækker. Oplysningerne om disse skrifttyper giver en feminin berøring uden at være uklar.
Leckerli One | snippet | Amaranth
Funky og moderne site
Funky skrifttyper tilføjer meget karakter. Bare sørg for at holde læsbarhed i tankerne.
glashvarre | Andika | puritanske
Formelt sted
Et mere formelt websted kræver mere formel typografi. Her er en kombination af et formelt script med traditionelle serif og sans serif skrifttyper.
Tangerine | Crimson Text | Rosario
Unikke og moderne steder
En anden unik, funky skrifttype parring. Kontrasten mellem de skarpe vinkler af titlen og kroppens skrifttyper med de afrundede kanter af meta fonten er en fin touch og tilføjer meget interesse.
geostar | Kelly Slab | Comfortaa
Konklusion
Som det allerede er nævnt, er der virkelig ingen undskyldning for ikke at arbejde med @font-face længere. Reglerne for god typografi gælder stadig, og alt hvad du ved om at kombinere websafe skrifttyper overfører. Du har lige meget flere muligheder nu!
Hvor ofte bruger du @ font-face i dine egne projekter? Gør du DIY eller bruger du en service? Del dine oplevelser og tips i kommentarerne!