Recordava que una de les novetats era la d’incrustar tipografies allotjades al mateix amb l’ordre @font-face i vaig decidir provar-la seguint els exemples que havia trobat per css3.info. Vaig provar-ho amb uns tipus de lletra OpenType, extensió .otf i ho vaig provar amb diferents navegadors, fins descobrir que Firefox 3.5.* ho suportava igual que el Opera 10.* i el Safari 4, evidentment Internet Explorer no.

Vaig deixar-ho una mica a mitges fins que ahir, actualitzant el blogroll em topo amb l’adreça antiga d’ Esbudellant Estàndards, i decideixo cercar la nova per actualitzar-la i, com caigut del cel, l’entrada més recent parla del @font-face.

Sembla ser que problema no és pas que la “majoria” de navegadors no suportin la regla @font-face, el que no suporten és segons quin tipus de lletra.

Per exemple, jo feia ús de la sintaxi més bàsica

@font-face { font-family: Qlassik; src: url('fonts/Qlassik_TB.otf') }

Com us comentava, al tractar-se d’un format OpenTypeen l’article de n’Artnau seria únicament compatible amb Firefox 3.5+, Safari 3.1+ i Opera 10+.

Que fem doncs amb navegadors com Internet Explorer o Chrome?
El mateix n’Artnau ens dona la solució, en el quadre trobem que per exemple Chrome, només suporta tipus SVG Font a partir de la versió 0.3 i TrueType a partir de Chrome 2.0 (cal dir que per defecte esta inhabilitat).

En el cas del Internet Explorer, a partir del Internet Explorer 6 dona suport a Embedded OpenType, extensió .eot

Així doncs, mentrestant els navegadors vagin al seu rotllo, i facin el que els hi roti, haurem d’incrustar diferents tipografies per satisfer les necessitats dels navegadors. Segons l’article de n’Artnau, cito textualment:

“Internet Explorer 8 o inferior no suporten més d’una declaració url() ni la declaració local() en una propietat src. El millor és tractar aquest navegador a part”

O també dona un solució que es el que he provat jo i em funciona perfectament, i valida el css nivell 3 sense problemes

Cal definir amb primera instància i amb url() la d’extensió .eot, com Internet Explorer 8 i inferiors diguéssim que no veuen més enllà de la primera declaració d’ url(), podem ficar les següents per a que els altres navegadors, les acceptin.

@font-face {
font-family: Qlassik;
src: url('fonts/Qlassik_TB.eot');
src: local('Qlassik'),
url('fonts/Qlassik_TB.otf') format('opentype'),
url('fonts/Qlassik_TB.woff') format('woff'),
url('fonts/Qlassik_TB.ttf') format('truetype');
}


L’únic problema és que ens obliga a fer una mica més pesada la fulla d’estil, tampoc ens morirem per un parell de línies més, i carregar el servidor amb més tipus de lletra.

Com ho faig si aquest tipus de lletra només el tinc en format OpenType?

Cap problema, hi han varies eines per la xarxa, només has de cercar una mica, la que més m’ha agradat a mi ha estat Online font converter

Trobaràs més informació en l’article de Esbudellant Estàndards e n’Artnau Siches

Em pregunto però si això solucionaria el tema imatges. Encara no he investigat, però per exemple veieu la imatge del logo del meu compte a GMail amb dos navegadors de la mateixa familia Firefox i Epiphany, no caldrà que especifiquí quin és quin suposo.

Com a simple usuari de linux, el qual no en té ni puta idea de compilar i recompilar i històries d’aquestes em veig en l’obligació de seguir veient coses rares amb el Mozilla Firefox o canviar a un altre navegador. Crec que el comparo amb el salt que vaig fer fa temps amb el sistema operatiu, quan vaig decidir trencar d’arrel amb qualsevol cosa que fes referència al Güindous.

Així doncs, apoltronat amb el Firefox (ja em va costar canviar-me de Mozilla a Mozilla Firefox) haurè de desintoxicar-me del Firefox que per cert a vegades m’altero amb tant consum de memòria. Alternatives? N’hi han moltes, Epiphany, Flock, Opera, Konqueror …

Potser la que més m’atrau és Konqueror, però Opera sembla tenir més comunitat al darrere amb extensions i tonteries d’aquestes que si, utilitzo en el Firefox