Web-fonttien käyttäminen

Sep 12, 2025

Miten tehdään

Seuraavassa on otettu BRAM Steinin WebFont-käsikirjasta. Osta se täällä .

Web-fontit määritellään CSS: ssä @ Font-kasvot sääntö. Jos olet web-kehittäjä, olet todennäköisesti kirjoitettu, kopioitu ja liitetty tai ainakin nähty @ Font-kasvot sääntö.

Täydellisyyden vuoksi käydään nopeasti perustelun kautta:

 @ font-face {
  Fontti-perhe: Elena;
  SRC: URL (Elena-tavallinen.woff);
}

Tämä luo uuden web-fonttiperheen, joka voidaan viitata fontti tai fontti Shorthand-hotelli. Mutta jotain puuttuu täältä. Kun viitataan web-kirjasin fonttipinoon, varmista aina ainakin yksi salausfontti, jos Web-fontti ei lataudu.

Tässä, jos Elena ei lataudu, selain putoaa geneeriseen serif Fonttiperhe:

 p {
  Fontti-perhe: Elena, Serif;
}

Siellä on enemmän fortback-fontteja, mutta nyt pidetään fonttimatkaamme yksinkertaisena mukaan lukien vain yleinen serif ja sans-serif fonttiperheet.

Fonttiperheet

Fonttiperheen luominen useilla tyyleillä toteutetaan luomalla @ Font-kasvot sääntö jokaiselle tyylille ja käyttämällä samaa fontti nimi. Seuraavat @ Font-kasvot Säännöt Luo perhe, jolla on normaali ja rohkea tyyli:

 @ font-face {
     Fontti-perhe: Elena;
     SRC: URL (Elena-tavallinen.woff);
     fonttipaino: normaali;
}
   @ Font-face {
     Fontti-perhe: Elena;
     SRC: URL (Elena-bold.woff);
     fonttipaino: rohkea;
}

Voit käyttää tätä fonttiperheä CSS: ssä viittaamalla sukunimen ja painon valitsijiin. Tämä koskee säännöllistä tyyliä kohtaan ja rohkea tyyli vahva Kohdat:

 p {
  Fontti-perhe: Elena, Serif;
}

p vahva {
  fonttipaino: rohkea;
}

sitä paitsi fonttipaino , @ Font-kasvot hyväksyy myös fonttityyli ja fontti Kiinteistön kuvaajat, jotka määrittelevät tyylit, kuten kursiivi ja kondensoitu. Kaikki kolme ominaisuuden kuvaajaa voidaan käyttää yhden fonttiperheen luomiseen useilla tyyleillä. Teoriassa tämä antaa sinulle mahdollisuuden luoda perhe, joka sisältää 243 yksittäistä tyyliä (yhdeksän fonttipaino Arvot × Kolme fonttityyli Arvot × yhdeksän fontti arvot).

Käytännössä kuitenkin olet rajoitettu 27 arvoon, koska jotkin selaimet eivät tue fontti . Tutustu alla olevaan taulukkoon nähdäksesi, mitkä selaimet voit käyttää ja katsoa tässä Tarkemmat tiedot.

Click the icon in the top right to enlarge the image — Klikkaa yläosassa olevaa kuvaketta suurentaaksesi kuvaa

Luckilla jäljellä olevat selaimet toteuttavat fontti Pian omaisuus, ja voit käyttää kaikkia 243 fonttiluokitusta.

Fonttiformaatteja

The src Descriptor kertoo selaimeen, johon saat fonttitiedoston. Edelliset esimerkit käyttivät yhtä fonttiformaattia, mutta usein näet URL-osoitteet useisiin fonttiformaattien yhdistettynä muotoihin, jotka on liitetty URL-osoitteen jälkeen Muoto ("Arvo") syntaksi.

Muotoilu Vihjeitä kertovat selaimelle, mitä fonttitiedoston muoto tietyssä URL-osoitteessa on.

 @ font-face {
  Fontti-perhe: Elena;
  SRC: URL (Elena-tavallinen.Woff2) Muoto ("Woff2"),
       URL (Elena-sery.woff) muoto ("woff");
}

Jos luetellaan useita muotoja, nykyaikaiset selaimet poimivat ensimmäisen muodon, jonka he tukevat muodon vihjeen perusteella. Siksi on tärkeää luetella web-fonttiformaatteja parhaan pakkauksen järjestyksessä ainakin.

Vaikka muodot vihjeet ovat valinnaisia, aina ne sisältävät ne - he antavat selaimen tietää muodon tarvitsematta ladata fontti. Jos esimerkiksi selain ei tue WOFF2: ta, mutta tukee Woffia, se voi ohittaa Woff2-fontti-tiedoston muodon vihje.

Selaimet tukevat useita verkkofonttiformaatteja: OpenType (TrueType), EOT, Woff ja Woff2. Jotkin selaimet tukevat myös SVG-fontteja, mutta ne ovat vanhentuneet ja niitä ei enää käytetä (eikä niitä pidä sekoittaa Uusi OPENTYPE-SVG-muoto ).

EOT, Woff ja Woff2 ovat teknisesti eivät fonttiformaatteja. Ne ovat pakattuja OPENTYPE-tiedostoja, joissa on vaihtelevia pakkaustapoja. WOFF2 tarjoaa parhaan pakkauksen, jota seuraa Woff ja EOT.

Tutkimus kaikkien selaimien kattavuudessa saatat joutua kohtaamaan jotain kutsutaan luodinkestävä @ Font-kasvot syntaksi fontspring.

Luodinkestävien syntaksi käyttää EOT, WOFF2, Woff, RAW OPENTYPE ja SVG-fonttitiedostot suurimman selaimen kattavuuden osalta:

 @ font-face {
  Fontti-perhe: Elena;
  SRC: URL (ELENA.EOT? #EFIX) Muoto ("upotettu-opentpe"),
       URL (ELENA.WOFF2) Muoto ("Woff2"),
       URL (Elena.woff) muoto ("Woff"),
       URL (Elena.oTF) muoto ("OpenType"),
       URL (ELENA.SVG # ELENA) Muoto ("SVG");
}

Ensimmäinen URL-rivi saattaa näyttää hieman outoa. Internet Explorer 8: n versiot 8 ja alapuolella eivät tue useiden fonttiformaattien syntaksia ja käsittele koko arvoa src omaisuutta URL-osoitteessa.

Luodinkestävät syntaksi temppuja Internet Explorer 8 ja alla ajattelemaan, että jäljellä olevat URL-osoitteet ovat osa ensimmäisen URL: n fragmentin tunnistetta. Koska fragmenttitunnisteet jätetään huomiotta, kun lataat tiedostoja, Internet Explorer 8 ja alla yksinkertaisesti käyttävät ensimmäistä URL-osoitetta.

Muut selaimet kuin Internet Explorer ohittaa rivin, koska ne eivät tue eotia.

Loput merkinnät ovat mitä odotat: fonttiformaatteja, jotka on lueteltu etusijajärjestyksessä.

Mutta onko luodinkestävä syntaksi edelleen merkityksellinen? Itse asiassa se on haitallista. SVG-fontit heikkenee ja tuetaan vain selaimilla, joita ei enää käytetä.

Useimmat verkkosivustot tukevat Internet Explorer 9: n ja ylös, mutta syntaksi luettelee eOT ensimmäisenä ensisijaisena fonttiformaatina. Vaikka Internet Explorer 9 ja UP-tuki Woff, nämä versiot lataavat edelleen EOT-tiedoston yksinkertaisesti siksi, että se on lueteltu ensin.

Koska useimmat sivustot eivät enää tue vanhoja selaimia, suosittelen yksinkertaistettua syntaksia. Tämä yksinkertaistettu syntaksi kattaa kaikki nykyaikaiset selaimet sekä hieman vanhemmat, jotka ovat edelleen aktiivisessa käytössä, kuten Android 4.4 ja aikaisemmin:

 @ font-face {
  Fontti-perhe: Elena;
  SRC: URL (ELENA.WOFFF2) Muoto ("Woff2"),
       URL (Elena.woff) muoto ("Woff"),
       URL (Elena.oTF) muoto ("OpenType");
}

Vaikka vanhempia Android-versioita käytetään edelleen, maailmanlaajuinen luottamus näistä selaimista on nopeasti vähentynyt. Pian luultavasti pystyy pudottamaan myös raaka-OPENTYPE-muodon ja yksinkertaistamaan syntaksia entisestään:

 @ font-face {
  Fontti-perhe: Elena;
  SRC: URL (ELENA.WOFFF2) Muoto ("Woff2"),
       URL (Elena.woff) muoto ("Woff");
}

Tällöin vanhemman selaimen käynnissä oleva joku näkee yksinkertaisesti salausfontit verkkofontin sijaan. Se on hieno; He voivat silti lukea sisällön salausfontissa.

On olemassa toinen mahdollinen arvo src Descriptor. The paikallinen Toiminto ottaa paikallisen fonttiperheen nimen. Jos fontti tapahtuu järjestelmään, selain käyttää sitä siten, että vältät ylimääräisen latauksen.

 @ font-face {
  Fontti-perhe: Elena;
  SRC: Paikallinen ("Elena"),
       URL (Elena-tavallinen.Woff2) Muoto ("Woff2"),
       URL (Elena-sery.woff) muoto ("woff");
}

Vaikka tämä voi tuntua erinomaiselta optimoinnilta, mikään ei takaa, että paikallinen fontti vastaa Web-fonttiasi.

Saatat saada eri fontin versio, fontti, jossa on eri kielituki tai jopa täysin erilainen fontti. Tästä syystä en yleensä suosittelen paikallinen Toiminto, ellet löydä näitä alennuksia hyväksyttäväksi.

Tämä on ote Bram Steinin Webfont-käsikirja , kirjasta toisistaan. Sieltä hän tutkii, mitä harkitsemaan, kun valitset verkko-fontteja, miten niitä käytetään tehokkaasti ja miten suorituskyky optimoidaan.

Aiheeseen liittyvät artikkelit:

Mitä helvettiä on blockchain?
30 kromi laajennuksia web-suunnittelijoille ja devs
20 hämmästyttävää ilmaista Google-verkkofonttia

Web-fonttien käyttäminen

Fonttiperheet

Fonttiformaatteja

Miten tehdään - Suosituimmat artikkelit

Miten Photoshop iPhonessa (kyllä, se on asia)

Kuinka rakentaa mediakyselyt Sassissa

Luo hehkuva neon-tekstin vaikutus

Rakenna sovelluksia, jotka toimivat offline-tilassa

Luo paremmat merkin animaatiot mayassa

Kuinka sekoittaa gouache-paletti

5 tapaa luoda enemmän impersive VR -kokemuksia

Luo luonne, jossa on tyylitelty realismi

Luokat