html5 ir pragaro virtuvės antraštės

Šiek tiek anksčiau suradau tokį džiaugsmą kaip Cufon. Long story short – pasiimi otf formato šriftą, perleidi per cufon mašinėlę ir gauni js failą, kuris sugeba nupaišyti [beveik] kiekvieną raidę ar simbolį. Rezultatas – perpiešti teksto fragmentai ten kur nori ir kur reikia (aišku, naudojant unobtrusive js su css selektoriais). Tačiau esant dial-up ryšiui (japp, kaikas jį vis dar naudoja), šitas reikalas užtrunka ir matosi visas perpiešimo procesas. “Primečiau” – Not Cool.

Peržiūrėjau vieną iš WWDC sesijų apie html5 ir WebKit. Sužavėjo. Visiškai. Nutariau paeksperimentuoti pas pragaro virtuvę (kadangi anksčiau pas ją sukosi cufon kastominio šrifto technika).

Taigi – @font-face. Rimtas reikalas. Ir įdomus. Čia yra parašyta kaip reikia viską padaryti tvarkingai (kaip visada – IE turi gliukų).

Kadangi esu geras ™ vebdeveloperis nusprendžiau palaikyti ir senesnes naršykles (kokias gi daugiau gali turėti namų šeimininkės?). Šiaip html5 apskritai yra agreguotas dalykas ir palaiko belenkokių gudžių (goodies), tad atsirado problema “kaip man sužinoti ar naršyklė palaiko @font-face ar priklauso namų šeimininkei”. Ilgai neteko gūglinti. Dar vienas įrankis į html5 įrankių paletę – modernizr. Taip pat siūlyčiau paskaityti apie tai, kaip ten veikia visas font-face palaikymas naudojant asinchroniškas užklausas. Aha, ir tu turi turėti teisę turėti teisę platinti bei naudoti proprietarinį šriftą.

Anyways…

Užsibaigiau su tokiu kodo gabalu, kuris daro ouldskūlinį perpaišymą namų šeimininkių naršyklėms ir naudoja @font-face stilius bleeding-edge fanatikams:

<script type="text/javascript">
Modernizr._fontfaceready(function(bool){
  if (!bool) 
    getScript('cufonizuotas-šriftas.js',function(){
      Cufon.replace('čia-eina-visi-css-selektoriai');
      Cufon.now(); // šitas reikalingas patenkinti IE or smth
    });
});
</script>

Aišku nepamirškite, kad tai reikia daryti po to, kai visas puslapis užsikrovė. Kadangi esu bleeding-edge fanas – taip ir nesužinosiu ar šitas dalykas veikia namų šeimininkėms su neįgaliomis naršyklėmis.

Referencui:

• pragaro virtuvė – bandomasis triušis
• cufon – fonts for the people
• modernizr – biblioteka html5 triukams.
• bullet proof @font-face – kaip TAI reikia daryti teisingai