bloc@niorcs.com:~$

Tinc un problema i es que la majoria de cops no em dona per llegir, tot el que hauria i deixo les coses a mitges. Recentment he tingut un encàrrec d’una plana web i vaig decidir tirar una mica de css3, així començava a experimentar una mica amb ell i em preparava per la seva arribada (jo m’hi preparo, no se si els navegadors faran el mateix …)

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