@font-faceSääntö sallii muokatun fontit ladattiin verkkosivulla. Kun se on lisätty tyylitaulukkoon, sääntö kehottaa selainta lataamaan fontin siitä, mistä sitä isännöidään, ja näyttämään sen sitten CSS: ssä määritetyllä tavalla.
Ilman sääntöä suunnittelumme rajoittuvat käyttäjän tietokoneeseen jo ladattuihin kirjasimiin, jotka vaihtelevat käytetyn järjestelmän mukaan. Tässä on mukava erittely olemassa olevista järjestelmäkirjasimista.
Syvin mahdollinen selaintuki
Tämä on menetelmä, jolla on syvin mahdollinen tuki juuri nyt. @font-faceSääntöä olisi lisättävä Tyylisivua ennen tyylejä.
@font-face ( font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ )Käytä sitten sen tyyliin tällaisia elementtejä:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Selaintuen käytännöllinen taso
Asiat siirtyvät voimakkaasti kohti WOFF: ta ja WOFF 2: ta, joten voimme todennäköisesti päästä eroon:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3.6+ | 11.50+ | 9+ | 4.4+ | 5.1+ |
Hieman syvempi selaintuki
Jos tarvitset jonkinlaista onnellista välinettä täydellisen tuen ja käytännön tuen välillä, se kattaa vielä muutaman perustan:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 3,5+ | 3+ | 3,5+ | 10.1+ | 9+ | 2.2+ | 4.3+ |
Erittäin progressiivinen selaintuki
Jos panostamme maatilalle WOFF: lla, voimme odottaa, että asiat siirtyvät kohti WOFF2: ta jossain vaiheessa. Tämä tarkoittaa sitä, että voimme elää vuotavalle reunalle:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Ei | 35+ lipulla | 23+ | Ei | 37 | Ei |
Vaihtoehtoiset tekniikat
@import
Vaikka se @font-facesopii erinomaisesti omille palvelimillemme isännöityille kirjasimille, voi joissakin tilanteissa isännöidyn fontin ratkaisu olla parempi. Google Fonts tarjoaa tämän tapana käyttää fonttejaan. Seuraava on esimerkki @importOpen Sans -fontin lataamisesta Google Fontsista:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Sitten voimme käyttää sitä tyylielementteihin:
body ( font-family: 'Open Sans', sans-serif; )Jos avaat kirjasimen URL-osoitteen, näet kaiken @font-facekulissien takana tehtävän työn.
Isännöidyn palvelun käytöstä on se etu, että se sisältää todennäköisesti kaikki kirjasintiedostojen muunnelmat, mikä varmistaa selainten välisen syvällisen yhteensopivuuden ilman, että meidän on itse ylläpidettävä kaikkia näitä tiedostoja.
Katso Kynä, jossa CSS-Tricksin (@ css-tricks) mukautettuja kirjasimia käytetään @importilla CodePenissä.
tyylitaulukon luominen
Vastaavasti voit linkittää samaan sisältökohteeseen kuin mihin tahansa muuhun CSS-tiedostoon, HTML-asiakirjan kohdassa eikä CSS: ssä. Käyttämällä samaa Google Fonts -esimerkkiä käytämme tätä:
Sitten voimme muotoilla elementtimme kuten muutkin menetelmät:
body ( font-family: 'Open Sans', sans-serif; )Jälleen, tämä tuo @font-facesääntöjä, mutta sen sijaan, että syötät niitä tyylitaulukkoon, ne lisätään HTML-koodiin .
Katso Kynä CSS-Tricksin mukautettujen fonttien käyttämisestä (@ css-tricks) CodePenissä.
Kyse on samasta asiasta ... molemmat tekniikat lataavat tarvittavat resurssit.
Kirjasintiedostotyyppien ymmärtäminen
Tämän viestin yläosassa oleva alkuperäinen katkelma viittaa moniin tiedostoihin, joilla on outoja laajennuksia. Käydään läpi kukin niistä ja ymmärretään paremmin, mitä ne tarkoittavat.
WOFF / WOFF2
Tarkoitettu: Web Open Font Format.
Verkossa käytettäväksi luodut ja Mozillan yhdessä muiden organisaatioiden kanssa kehittämät WOFF-fontit latautuvat usein nopeammin kuin muut muodot, koska ne käyttävät OpenType (OTF) - ja TrueType (TTF) -fonttien käyttämää rakennetta pakattua versiota. Tämä muoto voi myös sisältää metatiedot ja lisenssitiedot fonttitiedostoon. Tämä muoto näyttää olevan voittaja ja mihin kaikki selaimet ovat menossa.
WOFF2 on seuraavan sukupolven WOFF ja tarjoaa paremman pakkauksen kuin alkuperäinen.
SVG / SVGZ
Telineet: Skaalautuva vektorigrafiikka (fontti)
SVG on kirjasimen uudelleen luominen vektorilla, mikä tekee siitä paljon kevyemmän tiedostokoon ja tekee siitä ihanteellisen myös mobiilikäyttöön. Tämä muoto on ainoa, jonka Safari iOS: lle -versio 4.1 tai sitä uudempi versio sallii. Firefox, IE tai IE Mobile eivät tue SVG-fontteja tällä hetkellä. Firefox on lykännyt toteutusta määrittelemättömään keskittyä WOFF: iin.
SVGZ on SVG: n pakattu versio.
EOT
Telineet: Sulautettu avoin tyyppi.
Tämän muodon on luonut Microsoft (sen alkuperäiset kehittäjät @font-face), ja se on oma tiedostostandardi, jota tukee vain IE. Itse asiassa se on ainoa muoto, jonka IE8 ja sitä uudemmat versiot tunnistavat käytettäessä @font-face.
OTF / TTF
Tarkoittaa: OpenType-fontti ja TrueType-fontti.
WOFF-muoto luotiin alun perin reaktiona OTF: ään ja TTF: ään, osittain siksi, että nämä muodot voitiin helposti (ja laittomasti) kopioida. OpenType: llä on kuitenkin ominaisuuksia, joista monet suunnittelijat saattavat olla kiinnostuneita (ligatuurit ja muut).
Huomautus suorituskyvystä
Verkkofontit sopivat erinomaisesti suunnitteluun, mutta on myös tärkeää ymmärtää niiden vaikutus web-suorituskykyyn. Mukautetut kirjasimet saavat sivustot usein saavuttamaan suorituskyvyn, koska fontti on ladattava ennen sen näyttämistä.
Yleinen oire oli aiemmin lyhyt hetki, jolloin fontit latautuvat ensin varalla ja vilkkuvat sitten ladatun fontin kohdalla. Paul Irishillä on vanhempi viesti tästä (nimeltään "FOUT": Flash Of Styled Text).
Nykyään selaimet piilottavat yleensä tekstin ennen mukautetun kirjasimen lataamista oletuksena. Paremmin tai huonommin? Sinä päätät. Voit hallita tätä jonkin verran eri tekniikoilla. Hieman tämän artikkelin ulkopuolella, mutta tässä on trifecta Zach Leathermanin artikkeleita, jotta pääset alkuun kani-aukosta:
- Parempi @ font-face Font Load -tapahtumilla
- Kuinka käytämme verkkofontteja vastuullisesti, tai välttämällä @ font-face-palm
- Flash of Faux Text - vielä enemmän fonttien lataamisesta
Tässä on muutamia huomioita mukautettujen kirjasinten käyttöönotossa:
Katso tiedoston koko
Fontit voivat olla yllättävän raskaita, joten nojaa kohti vaihtoehtoja, jotka tarjoavat kevyempiä versioita. Suosittele esimerkiksi kirjasinsarjaa, joka on 50 kt, verrattuna 400 kt: n painoiseen kirjasinsarjaan.
Rajoita merkistöä, jos mahdollista
Tarvitsetko todella rohkeita ja mustia painoja yhdelle fontille? Fonttisarjojen rajoittaminen lataamaan vain käytettävät on hyvä idea, ja tässä on joitain hyviä vinkkejä.
Harkitse järjestelmäkirjasimia pienille näytöille
Monet laitteet ovat jumissa kömpelöissä yhteyksissä. Yksi temppu saattaa olla kohdistaa suurempiin näyttöihin, kun mukautettua kirjasinta ladataan @media.
Tässä esimerkissä näytöille, jotka ovat pienempiä kuin 1000 kuvapistettä, näytetään järjestelmän fontti ja laajalle ja sitä suuremmille näytöille mukautettu fontti.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Font Services
On olemassa useita palveluja, jotka isännöivät fontteja ja tarjoavat pääsyn myös kaupallisesti lisensoiduille kirjasimille. Palvelun käytön edut johtuvat usein siitä, että laaja valikoima laillisia kirjasimia toimitetaan tehokkaasti (esim. Palvelevat niitä nopeasti CDN: llä).
Tässä on muutama isännöity fonttipalvelu:
- Pilvi-typografia
- Typekit
- Fontdeck
- Verkkotyyppi
- Fontspring
- Typotheque
- Fonts.com
- Google-fontit
- Font Orava
Entä Icon-fontit?
On totta, että @ font-face voi ladata kirjasintiedoston, joka on täynnä kuvakkeita, joita voidaan käyttää kuvakejärjestelmässä. Luulen kuitenkin, että olet paljon parempi käyttää SVG: tä kuvakejärjestelmänä. Tässä on vertailu kahdesta menetelmästä.
Lisää resursseja
- Google Font API: n perusteet
- CSS-fonttiperheet