Всички дизайнери си падат по готини и естествено неподходящи за уеб шрифтове. И поне от време на време карат програмистите да направят всичките заглавия в сайта с картинки. За тези, които искат да го направят по правилата на уеб стандартите, но още не са изчели купищата статии с предложения как да стане, ето основните варианти.

Fahrner Image Replacement (FIR)

Слагаве обикновен заглавен таг:

<h1>здравей, свят</h1>

Прилагаме му следния стил:

h1 {
text-indent: -3000px;
background('logo.gif') no-repeat;
height: 30px;
}

Всъщност до тук нищо ново, техниката e описана подробно и във всичките си вариации от Дейв Ший (Dave Shea). Недостатъкът, който не е решен в нито една от вариацийте е случаят, когато потребителят забрани зареждането на картинки, но позволява CSS. В този, макар и рядък случай не се вижда нищо. Този проблем е избегнат в една малко по-различна техника, разработена от Джонатан Кристофър (Jonathan Christopher). Неговата идея е съвсем проста – вместо да скрива текста, той се слива със фона.

Jonathan’s Latest Take on Image Replacement

body {
background: #fff;
color#000;
}

h1 {
font-size: 10px;
background: URL('header.gif') no-repeat left #000;
color:#fff;
}

Недостатъкът на тази техника е, че за да се скрие текстът, трябва да се предвидят няколко пиксела над заглавието. Освен това ако потребителят увеличи малко повече големината на шрифта, текста започва да „настъпва“ картинката.

sIFR

Третата техника за замяна на текст с картинка е sIFR – чрез javascript текста се заменя със флаш със същия размер, в който може да се използва произволен шрифт. Техниката е много ефектна и не е нужно да подготвяте предварително картинки за всяко заглавие. Не се сещам за друг недостатък, освен използването на флаш.

Етикети: CSS, достъпност, уеб стандарти