Merri
Site Admin
Joined: 11 Jan 2010
Posts: 19
|
 Posted: 2010-Jan-Wed 15:04 Post subject: Enemmän fontteja: @font-face on saatu takaisin! |
 |
|
Kaikki uusimmat selaimet tukevat nyt CSS 3:n uudelleen esiteltyä @font-face -määritystä. Viimeisenä mukaan tuli Chrome, jonka uusi nelosversio lisäsi tuen. Aiemmin CSS 2 määritteli @font-facen, mutta vain Internet Explorer lisäsi tuen, ja sekin käyttäen omaa tiedostomuotoa, joka ei saavuttanut suurta suosiota. Sittemmin CSS 2.1:stä koko @font-face poistettiin kokonaan, mutta nyt CSS 3:ssa se palaa takaisin. Samaan aikaan kaikkien valtavirtaselaimien valmistajat ovat lisänneet tuen käytetyimmille tiedostomuodoille.
Käyttö pähkinänkuoressa
- Firefox 3.5, Safari 3.1+, Chrome 4+ ja Opera 10+ vaativat OTF tai TTF -fontin.
- Internet Explorer 4+ vaatii EOT-fontin.
- Firefox 3.6+ tukee myös WOFF-muotoa.
- IE:lle tarvitsee määrittää EOT omalla rivillään ja vain yksi fontti voidaan määrittää.
- Muut selaimet toimivat omalla rivillään, fonttimäärityksiä voidaan antaa useampia ja niille voi olla tarkenne tiedostomuodosta. Näin Firefox 3.6+ voi ladata valmiiksi pakatun WOFF-fontin kun muut selaimet voivat ladata joko OTF tai TTF-fontin. Fontista on myös mahdollista käyttää paikallista kopiota, mikäli sellainen on jo ladattuna koneelle.
Eli siis vaikka näin: | Code: | @font-face {
font-family: 'LatiniaRegular';
src: url('Latinia.eot');
src: local('Latinia Regular'), local('Latinia-Normal'), url('Latinia.ttf') format('truetype');
} |
Tämän lisäksi fontti täytyy toki määrittää käyttöön. Voit myös määrittää vaihtoehtoisia fontteja käytettäväksi siltä varalta, ettei jokin selain tue @font-facea tai mikäli palvelin ei virheen vuoksi kykene tarjoamaan fonttia: | Code: | body {
font-family: 'LatiniaRegular', 'Calisto MT', 'Gentium', 'Palatino Linotype', 'Palatino', 'Georgia', 'Book Antiqua', 'Times New Roman', serif;
} |
Vaihtoehtoisia fontteja ei toki tarvitse olla noin paljon.
Mistä fontteja saa?
Ongelmakohtia
Fonteissa on kaksi suurta ongelmaa: pakkaaminen ja välimuistitus. Lisäksi Internet Explorer tekee helposti ylimääräisiä kutsuja, siten rasittaen verkkoa turhaan. Jotkin fontit voivat helposti olla useita megatavuja, joten niitä olisi tilanteen mukaan hyvä rajata pienempään tilaan. WOFF-muotoiset tiedostot eivät ole aivan niin ongelmallisia, ne on jo valmiiksi pakattuja, mutta tässä vaiheessa vain Firefox 3.6 tukee niitä. TTF- ja OTF-muotoiset fontit sen sijaan kannattaa pakata palvelimen toimesta. Tämä onnistuu esimerkiksi käyttäen .htaccess-tiedostoa: | Code: | <ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(eot|otf|ttf)$
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule> |
Huomaa että yleensä muitakin tiedostoja kannattaa pakata palvelimen toimesta!
Lisäksi fontit on hyvä välimuistittaa tehokkaasti: | Code: | <ifModule mod_headers.c>
<filesMatch "\\.(eot|otf|ttf|woff)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
</ifModule> |
Firefoxin verkkotunnuksen rajoitukset
Mikäli käytät sivuillasi useampia verkkotunnuksia, niin sinulla voi olla ongelmia saada fontti näkymään niillä sivuilla, joiden verkkotunnus poikkeaa esimerkiksi alidomainin käytön vuoksi siitä verkkotunnuksesta, jolla sivusi on. Esimerkiksi jos fontti on osoitteessa verkkotunnus.fi/fontti.ttf, mutta varsinainen sivu onkin osoitteessa oma.verkkotunnus.fi/sivu.html, niin fontti ei näy Firefoxissa. Jälleen täytyy turvautua .htaccessiin: | Code: | <FilesMatch "\.(eot|otf|ttf|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch> |
Tähden tilalle pitäisi myös kuulemma olla mahdollista syöttää http-alkuinen osoite, muttei se ainakaan omalla kohdallani ole toiminut. |
|
FAQ
Search
Memberlist
Usergroups
Register
Profile
Log in to check your private messages
Log in
