Mukautettujen kirjasimien käyttäminen verkkosivuilla
Tekstisisältö on aina ollut tärkeä osa verkkosivustoja, mutta verkon alkuvaiheessa suunnittelijat ja kehittäjät olivat hyvin rajoitetumpia typografisessa valvonnassa, jonka heillä oli heidän verkkosivujensa yli. Tämä sisälsi kirjasinten rajoituksen, jonka he pystyivät luotettavasti käyttämään sivustoissaan. Olet todennäköisesti kuullut aiemmin mainitusta "web safe fonts" -käsitteestä. Tämä viittaa pieniin kirjasarjoihin, jotka olivat erittäin todennäköisesti mukana henkilön tietokoneessa, mikä tarkoittaa, että jos sivusto käyttää yhtä näistä kirjasimista, se oli turvallinen veto, että se olisi tehty oikein henkilön selaimessa.
Nykyään web-ammattilaisilla on runsaasti uusia fontteja ja tyyppiasetuksia, joista yksi on WOFF-muoto.
Mikä on WOFF?
WOFF on lyhenne sanoista "Web Open Font Format". Sitä käytetään pakkaamaan fontteja käytettäväksi CSS @ font-face -ominaisuuden kanssa. Se on tapa upottaa fontit Web-sivuille, jotta voit käyttää erikoistuneita kirjasimia kuin tyypilliset "Arial, Times New Roman, Georgia" - jotka ovat joitain edellä mainituista web-turvallisista fonteista.
WOFF toimitettiin W3C: lle vakioksi verkkosivujen fonttien pakkaamiseen. Se tuli työskentelyluonnokseksi 16. marraskuuta 2010. Tänään meillä on todella WOFF 2.0, joka parantaa pakkauksen muotoilun ensimmäisestä versiosta lähes 30%. Joissakin tapauksissa nämä säästöt voivat olla vieläkin vähäpätöimpiä!
Miksi käyttää WOFFia?
Web-kirjasimet, mukaan lukien WOFF-muodossa toimitetut, tarjoavat paljon etuja verrattuna muihin fontin valintoihin. Niin hyödyllisiä kuin ne web-turvalliset kirjasimet ovat, ja työssä on varmasti vielä paikka niille kirjasimille, on mukava myös laajentaa valintojamme ja avata typografiset vaihtoehdot.
WOFF-kirjasimilla on seuraavat edut:
- Ne ovat helpommin kuin fontteja kuvina. WOFF-tyylit tekevät selkeää HTML-tekstiä CSS: llä, mikä antaa sinulle esteettömyyden ja suunnittelun hallinnan, jota kuvat eivät salli.
- WOFF-tiedostoihin sisältyy typografisia tietoja, kuten kontekstuaalisia muotoja ja vanhan tyylin kuvioita. Tämä antaa verkkosivillesi paremman typografian, koska käytät oikeita merkkejä, ei vain likiarvoja.
- WOFF-kirjasimet voivat auttaa kansainvälistymisessä, koska fontit voidaan upottaa muiden kielten merkkeihin.
- Kuten kaikki CSS -tyylitekstit, WOFF-fontit ovat enemmän hakukoneiden ystävällisiä. Hakukoneet eivät "näe" tekstiä upotettuina, ja vaikka ALT-teksti voi auttaa, tekstissä ei ole sijaa.
- WOFF-fontit pakataan, joten ne ovat pienempiä kuin muut kirjasintyyppitiedostot. Tämä auttaa sivuston latausnopeutta ja yleistä suorituskykyä.
- Voit käyttää WOFF-tiedostoja säilyttääksesi brändi-identiteettisi upottamalla yrityksen fontit WOFF-tiedostoiksi.
WOFF -selaimen tuki
WOFFilla on erinomainen selaintituki nykyaikaisissa selaimissa, kuten:
- Chrome 6+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 11.1+
- Safari 5.1+
Se on lähinnä tuettu koko laudan näinä päivinä, sillä yksinäinen poikkeus on kaikkien versioiden Opera Mini.
Kuinka käyttää WOFF-fontteja
Jotta voit käyttää WOFF-tiedostoa, sinun on ladattava WOFF-tiedosto web-palvelimelle, anna sille nimi @ font-face -ominaisuudella ja soita fontti CSS: ään. Esimerkiksi:
- Lataa kirjasin nimeltä myWoffFont.woff web-palvelimen / fonts -hakemistoon.
- Lisää CSS-tiedostoosi @ font-face -osiossa:
@ font-face {
font-perhe: myWoffFont;
src: url ('/ fonts / myWoffFont.woff') muoto ('woff');
}
- Lisää uusi fontin nimi (myWoffFont) CSS-fonttipinoosi, kuten mikä tahansa muu fontin nimi:
p {
fonttiperhe: myWoffFont , Geneva, Arial, Helvetica, sans-serif;
}
Mistä saa WOFF-fontit
Löydät paljon WOFF-fontteja, jotka ovat ilmaisia kaupallisiin ja ei-kaupallisiin tarkoituksiin:
- Avaa kirjaston kirjasto
- Fontti-orava
Jos sinulla on käyttöoikeus fontin käyttämiseen, joka ei ole käytettävissä WOFF-muodossa, voit käyttää WOFF-luojaa, kuten Font-oravissa, muuttamaan fonttitiedostot WOFF-tiedostoiksi. Lisäksi on olemassa komentorivityökalu nimeltä sfnt2woff, jota voit käyttää Macintoshissa ja Windowsissa TrueType / OpenType-fonttien muuntamiseksi WOFFiksi.
Lataa järjestelmäsi sopiva binääri ja suorita se komentorivillä (tai Terminal) ja noudata ohjeita.
WOFF-esimerkki
Seuraavassa on muutamia esimerkkejä WOFF-tiedostoista: WOFF-sivu HTML5: ssä 24 tunnissa.
Alkuperäinen artikkeli Jennifer Krynin. Julkaisija Jeremy Girard 17.11.17