@font-face: Internet Explorer

[Macpoika]

Mikä on kun @font-face ei toimi IE:llä?
Kun oma koodi ei toiminut, kokeilin Font Squirrelin @font-face-generaattoria. Testaan hommaa IE6:lla Winellä.

Koodi: Valitse kaikki

@font-face {
	font-family: 'TitilliumText14L400wt';
	src: url('TitilliumText400wt.eot');
	src: local('TitilliumText14L 400 wt'), local('TitilliumText14L-400wt'), url('TitilliumText400wt.otf') format('opentype'), url('TitilliumText400wt.svg#TitilliumText14L-400wt') format('svg');
}

Omaa koodia olen testannut windowsilla, mutta ei toiminut.

[anttti]

Vähän arvailua, mutta pari juttua:
1. IE:ssä ei tuo format taida toimia (eli estää koko homman toiminnan)
2. miksi src-elementtejä on kaksi?

[morbusg]

^niin.. jälkimmäinen yli-ajaa ensimmäisen, eiks jeh?
if IE -lohkoa kehiin

[Macpoika]

Tuo koodi itseasiassa aidolla IE:llä toimii.
Ensimmäinen src määrittelee IE:lle annettavan tiedoston. Toinen määrittelee muille selaimille.
IE, kun ei juuri osaa tuota 'local'-attribuuttia eikä ylipäätään useita attribuutteja src:ssä. SVG on iPhonelle ja OTF muille.

[iivoo]

edit. Äh, huono lukutaito paljasti että sullahan on tuolla on jo alunalkujaan .eot-fontti. Eli eipä sitten mitään.

Tosin kokemuksesta sanon, että en ole itse saanut ikinä @font-facea toimimaan IE:llä vaikka sen pitäisi olla mahdollista.

[Macpoika]

edit. Äh, huono lukutaito paljasti että sullahan on tuolla on jo alunalkujaan .eot-fontti. Eli eipä sitten mitään.

Tosin kokemuksesta sanon, että en ole itse saanut ikinä @font-facea toimimaan IE:llä vaikka sen pitäisi olla mahdollista.

Tuo koodi toimii.
Font Squirrelilla (nettisivu) voi uploadata sen fontin. Sitten valitset, mitkä formaatit haluat ym. asetukset ja klikkaat nappia. Saat zip-kansion, jossa kaikki eri formaatit plus css-tiedostot.

[Macpoika]

Selitänpä tuon koodin siis.
IE, kun tulee tuohon, se menee suoraan viimeiseen src-määritykseen. Ei tykkää, kun siellä on tuo “local” sekä useita attribuutteja muutenkin. Se siis siirtyy siihen aiempaan src:hen ja hakee .eot-tiedoston.
Muut selaimet menevät kiltisti siihen toiseen ja ottavat ensimmäisen toimivan fontin. Eli otf Firefoxille, Safarille ym. ja SVG iPhonelle. @font-facen suuri käyttö MobileSafarissa näyttäisi minun kokeilullani (iPod touch 1st Gen.) kuristavan selainta hieman. Lataa sivua aika pitkään... Eikä se ole pelkästään tiedostokoko... :/

[iivoo]

http://net.tutsplus.com/videos/screenca ... -you-wish/

Tossa on kanssa muutama toimiva tapa vaikkei css:n puolella enää ollakaan.