Briefly In English

21.7.2009 Web-fontit, @font-face sekä erilaiset fontin korvaus menetelmät vertailussa

Tässä artikkelissa vertailen erilaisia fontin korvaus -menetelmiä, joilla webissä saadaan mikä tahansa fontti käyttöön. @font-face tuen yleistyminen selaimissa tuo mukanaan ominaisuuden, jolla erikoisten fonttien käyttäminen helpottuu. Kuitenkin niin kauan kun kaikkien selaimien tuki tälle font-face -ominaisuudelle on puutteellinen täytyy tyytyä erilaisiin muihin ratkaisuihin. Font-facen idea on se että fontti ladataan määritellystä osoitteesta jos sitä ei käyttäjän koneelta löydy. Jos fonttia ei jostain syystä saada asennettua käytetään seuraavana listassa olevaa fonttia.

@font-face esimerkki

Alla esimerkki miten näppärästi @font-face toimii (lähde w3.org). Safari on tukenut font-facea versiosta 3.1 eteenpäin. Firefoxiin tuki on tullut versiossa 3.5. Operaan tuen pitäisi tulla versiosta 10 lähtien. Internet Explorer tukee ainostaan EOT-fontteja, kun muissa selaimissa toimivat TrueType sekä OpenType. Google Chrome -selain ei vielä tue font-facea.

@font-face {
  font-family: Gentium;
  src: url(http://site/fonts/Gentium.ttf);
}

p { font-family: Gentium, serif; }

@font-face tuki sisältää kuitenkin seuraavat ongelmat:

  • Fonttien lisensoinnin kanssa voi olla ongelmia, koska useimpien fonttien EULA kieltää fonttien embeddaamisen suoraan www-sivuille.
  • IE6, IE7 ja IE8 eivät tue tätä menetelmää täysin (ainoastaan EOT-fontit toimivat).
  • Ladattava fonttitiedosto voi sisältää viruksia tai muuta vahingollista koodia.

Vaihtoehdot fonttien korvaamiseen

Erilaisia ratkaisuja fonttiongelmaan ovat muun muassa sIFR, FLIR, Cufón, Typeface, tekstin korvaaminen kuvalla CSS:n avulla sekä erilaiset menetelmät, jotka muuntavat tekstiä kuviksi jo palvelinpäässä (muuan muassa eZ Publishin texttoimage-operaattori). Nämä niin sanotut txt2image-toteutukset alkavat jo kuitenkin olla vanhanaikaisia ja huonoja erityisesti hakukoneoptimoinnin kannalta. sIFR, FLIR, Cufón ja Typeface korvaavat halutut tekstit Javascriptin avulla. Teksti on siis aivan normaalina tekstinä lähdekoodissa, joten näistä tekniikoista ei ole haittaa hakukoneoptimoinnille. Vaikean päivitettävyyden takia CSS-tekniikka sopii lähinnä sivuille joissa korvattavia tekstejä on vähän.

Hyvät ja huonot puolet erilaisista tekniikoista

sIFR

sIFR käyttää tekstien korvaamiseen Flashia ja Javascriptia. Teksti korvataan Flash-elementillä. Fontti täytyy muuntaa swf-tiedostoksi ennen käyttöä.

Plussat

  • Joukon ainoa jossa teksti säilyy valittavana (paitsi linkeissä).
  • Teksteihin voi helposti tehdä erilaisia efektejä Flashin filttereillä (varjostukset, hohtaminen, blurraus jne.)
  • Ei ongelmia lisenssien kanssa, koska alkuperäinen fontti on muunnettu swf-tiedostoksi ja sen käyttöoikeus voidaan rajoittaa haluttuun domainiin.

Miinukset

  • Hitain.
  • Vaatii Javascriptin sekä Flash-pluginin toimiakseen.
  • Fonttitiedosto on tehtävä jollain Flash-ohjelmistolla esimerkiksi Adobe Flash.
  • Monimutkaisin, joka johtaa helposti ongelmiin typografian ja elementtien sijoittelun kanssa.

FLIR

FLIR generoi kuvan palvelimella PHP:n ja GD-kirjaston avulla. Tekstit korvataan kuitenkin Javascriptin avulla, joten tekstit ovat oikeana tekstinä lähdekoodissa.

Plussat

  • Nopeampi kuin sIFR.
  • Aavistuksen helpompi ottaa käyttöön kuin sIFR.
  • Ei vaadi Flashia.
  • Ei ongelmia lisenssien kanssa, koska fontti sijaitsee palvelimella ja sen käyttö voidaan rajata kyseiseen domainiin.

Miinukset

  • Vaatii PHP:n ja GD-kirjaston.
  • Teksti ei ole valittavissa.

Cufon & Typeface

Cufón ja Typeface käyttävät VML ja/tai Canvas elementtejä tekstien korvaamiseen. Alkuperäinen fonttitiedosto konvertoidaan Javascript-tiedostoksi, joka liitetään sivustolle.

Nämä tekniikat ovat melkein identtiset eikä niillä juurikaan ole merkittäviä eroja käytön tai toiminnan suhteen. Itse en ole Typefacea vielä käyttänyt projekteissa, koska Cufón on toiminut lähes moitteetta ja törmäsin siihen ensimmäisenä. Eroja voi tarkemmin lukea tästä Kilian Valkhofin blogikirjoituksesta: Cufón vs. Typeface.js, which one is better?

Plussat

  • Ei tarvetta Flashille.
  • Nopeus
  • Helppokäyttöisimmät ja nopeimmat ottaa käyttöön.

Miinukset

  • Teksti ei ole valittavissa.
  • Lisensoinnin kanssa voi tulla ongelmia, koska konvertoitu fonttitiedosto liitetään suoraan sivustolle, josta kuka tahansa voi sitä käyttää.

Toisessa postauksessaan Combining Cufón and @font-face Kilian Valkhof kirjoittaa miten voit yhdistää Cufonin ja @font-facen. Tekniikka käyttää jQueryn pluginia jolla haistellaan onko fontti käytettävissä. Jos fonttia ei löydy, niin käytetään Cufónia.

@font-face toimimaan IE:lle ja muille font-facea tukeville selaimille

On myös mahdollista saada font-face toimimaan kaikissa selaimissa, jotka sitä tukevat. Homma vain täytyy tehdä niin, että IE:lle tarjoillaan EOT-fontti ja muille TrueType tai OpenType. Alta näet miten tämä onnistuu.

<!--[if IE]>
<style type="text/css">
@font-face {
    font-family:"Fenwick EOT";
    src: url(fonts/fenwick.eot);
}
</style>
<![endif]-->

<style type="text/css">
@font-face {
    font-family:"Blackout 2am";
    src: url(fonts/Blackout-2am.ttf);
}

h1 {
    font-family: "Blackout 2am", "Fenwick EOT";
    font-size: 28px;
    color: #000;
}

p {
    font-family: "Blackout 2am", "Fenwick EOT";
    font-size: 14px;
    color: #000;
}
</style>

Tein myös testisivun, jossa toiminnan näkee käytännössä. Fontti on eri IE:lle ja muille, koska en saanut tuota Blackout-fonttia konvertoitua EOT-tiedostoksi, mutta käytännön toteutuksissa tarkoitus olisi, että fontti on sama kaikille selaimille.

Cufónilla ja muilla tekniikoilla saadaan edelleen parempi lopputulos, koska kaikki selaimet/käyttöjärjestelmät eivät käytä reunojen pehmennystä tekstiä näytettäessä.

Aihe: HTML & CSS | Trackback | Kommentit RSS | 4 kommenttia »
Tagit: , , , , , , , ,

31.7.2009 klo. 23:17 Tero Auralinna

Jälleen uusi vaihtoehto tulossa: Typekit.
http://blog.typekit.com/

Tästä lisää juttua myöhemmin kunhan tuo julkaistaan.

11.8.2009 klo. 08:44 Tero Auralinna

Tässäkin yksi vaihtoehto (TypeSelect), jonka vahvuuksia näyttäisi olevan, että teksti on valittavissa normaaliin tapaan. Perustuu Typefaceen. Käyttöä tosin taitaa hieman rajoittaa tällä hetkellä puuttuva tuki :hover määritteelle ja rivinvaihdoille.

http://www.typeselect.org/

3.9.2009 klo. 13:13 Esko Kumpunen

Jeffrey Zeldman tuntuu odottavan Typekitiä innokkaana, ja kirjoittaa näin:

“Presently my options for using real type include setting type in Photoshop and using CSS image replacement to swap it (or using an IMG with alt text); Cufón or SIFR (which type shops aren’t crazy about, and which can be cumbersome to implement); or third-party solutions like Jeff Veen’s Typekit, a new web service offering a web-only font linking license on a hosted platform (which, when it opens, may be the perfect solution until the type foundries agree to a standard).”

http://www.zeldman.com/2009/07/16/web-fonts-now-for-real/

18.4.2010 klo. 02:30 Timppa

Hyvin näyttäisi tuo @font-face pelittävän yleisimmillä selaimilla. Tällä hetkellä kahdella sivustollani käytössä. Näyttäisi toimivan myös tuolla Nokia N900.

Ensin etsin jotain convert-softaa, mutta sen jälkeen huomasin, että eot-päätteen voi vain vaihtaa jos haluaa ttf, mutta toiseen suuntaan ei vissiin pelitä suoraan, koska N900 ei osaa näyttää kakkosfonttia.

Noh, testailen lisää tulevaisuudessa. :)

Kommentoi kirjoitusta

Täytäthän kaikki pakolliset kentät jättääksesi kommentin