Веб фонтови у ЦСС3 помоћу @font-face правила

@font-face је ЦСС правило које омогућава коришћење произвољних веб фонтова. У оквиру овог правила се наведе назив фонта који се користи, као и адреса фајла са тим фонтом, и прегледач (браузер) аутоматски скине тај фајл и прикаже садржај у одговарајућем фонту. Ово правило је уведено у ЦСС2, али није (ваљано) имплементирано па је повучено у ЦСС2.1. Затим је поново уведено у верзији 3.

Сада коначно имамо ситуацију да сви велики прегледачи подржавају овакво укључивање фонтова, тако да су веб фонтови постали реалност. Веб дизајнери више не морају да буду ограничени на болно узак скуп такозваних веб-безбедних фонтова (фонтови за које је вероватно да су присутни на великој већини рачунара, независно од оперативног система и верзије).

Колико је ово велика ствар осликавају следеће две чињенице. Прво, тренутно огромна већина сајтова на Интернету користи фонтове из тог малог, познатог скупа (Times New Roman, Arial, Verdana, Comic Sans..). Сад је веб дизајнерима на располагању практично неограничен скуп предивних (на жалост и неких који нису баш сјајни) фонтова које могу да користе. Друго, мотиви за прављење нових фонтова су раније били следећи: ако направите нови фонт (што је поприличан посао), и моћи ћете да га користите да штампате своје документе (књиге, публикације), и моћи ћете да их користите у десктоп апликацијама које ви направите (могуће да сам пропустио неки битан мотив). Међутим на Интернету, ваш фонт је био онолико употребљив колико га људи поседује на свом рачунару. То је у пракси значило да ако ви данас направите баш добар и леп фонт, и омогућите да се он слободно користи, могли би да се надате да ће он постати у пуној мери употребљив на Интернету за најмање 15так година. То је предуго. Сада је ваш фонт употребљив на Интернету у тренутку када га објавите (наравно употребљив у мери у којој га лиценца под којом га објавите чини употребљивим, али то је већ друга прича), јер ће практично сваки посетилац видети ваш садржај у оном фонту који сте ви назначили, било да поседује или не поседује тај фонт на свом рачунару.

Остаје свеприсутно питање подржаних прегледача. Веб дизајнерима и девелоперима обично спласне одушевеље због неке нове технологије или могућности кад се сете да 20% корисника Интернета још увек користи несрећни Ие6, и да ће као таоци Мајкрософтове неспособности/злобе морати да чекају још годинама док не примене ту нову технологију. На пример, још се не зна да ли ће Ие9 (који у тренутку писања овог текста још није изашао) подржавати SVG, општеприхваћен стандард за векторску графику, одавно подржан од стране осталих прегледача. У случају веб фонтова необична и срећна околност је то што Ие од давних дана подржава @font-face правило, тј. први (или међу првима) га је подржао. Наравно, то (као и обично када је Ие у једначини) не значи да ће ствари да иду глатко, јер Ие подржава само .eot формат док остали прегледачи подржавају отприлике све остале (међу којима је и WOFF који ће готово извесно бити нови стандард, а за који је Мајкрософт рекао да разматра да га подржи у Ие9). Постоје међутим ЦСС хакови који омогућавају да се овај проблем заобиђе (види [1]). Нове верзије Фајерфокса, Опере, Хрома и Сафарија подржавају ово правило. Мали проценат корисника Интернета користи старије верзије ових браузера али њихов број ће се убрзо врло смањити. Осим тога, моје је лично мишљење да ако неко неће да користи нови браузер, то је његов избор, а последица тог избора је да његово искуство на Интернету није увек најквалитетније (овај став вероватно не пије воду посматрано из угла развоја комерцијалних веб сајтова). Међутим оно шта стоји као чињеница је да су сви браузери довољно паметни да искористе фол-бек (fall-back) фонт. Ако ја наведем нпр. следећу секвенцу:

h1 { font-family: "MojFont", arial, sans-serif; }

посетилац са новијим прегледачем ће видети мој фонт, а онај чији прегледач то не омогућава ће видети аријал, што је мој следећи избор, и сви срећни.

Како ово у пракси ради?

Потребно је да у свом ЦСС фајлу дефинишете фонт који ћете да користите. То се ради на пример на следећи начин:

@font-face { font-family: "Resavska"; src: url("type/Resavska BG Sans.otf"); }

Урл мора да води на адресу која садржи жељени фонт, било да се фајл налази на вашем сајту или на неком трећем сајту. Ако сте ово лепо улинковали, и ако фонт садржи карактере које користите на страници то би требало да буде то. Даље у ЦССу дефинишете на којим елементима да се користи тај фонт. На пример:

body { font-family: "Resavska", Georgia, serif; }

Ако фонт "Resavska" постоји, биће он приказан. У супротном, уколико постоји фонт Georgia биће он приказан. Ако ни он не постоји, биће приказан подразумевани сериф фонт (што је вероватано Times New Roman)

За детаљније упутство погледати на пример [1].

Закључак:

Уочени проблеми:

Горан Обрадовић (април 2010.)

Литература:

  1. How to use CSS @font-face (погледати и линкове који воде са те странице).
  2. A list apart: CSS @ Ten: The Next Big Thing (писано у августу 2007, када веб фонтови нису били реалност, али њихови текстови су увек вредни читања)
  3. ЦСС стандард

Creative Commons License