C, PHP, VB, .NET

За разлика от стандартните текстови документи, в правенето на интернет страница се залага изключително много на визуалното представяне. Доста голяма роля за него играят шрифтовете. Естествено целта на тези статии не са да обучават на дизайн и естетика. Затова ще се фокусираме главно към технологията. Подбора и комбинацията от шрифтове ще оставим за други специализирани курсове.

Вече показахме възможности за декориране на текст, като например често използваното подчертаване. Освен това още в началото казахме как можем да удебеляваме текст чрез таг <b> и да го правим в курсив чрез таг <i>.  Всъщост удебеляването и курсива могат да се постигнат също чрез стилове:

<div style="font-style:italic">Този текст е в курсив</div>
<div style="font-weight:bold">този текст е удебелен</div>

Резултат:

Ясно е, че е доста по-лесно използването на <b> и <i>. Въпреки това бихме искали да насърчим използването на стилове. Ще разберете защо след като задълбаем повече във възможностите на CSS (Cascaded Style Sheets или Каскадни Стилове).

Стигнахме и до същината на текущата статия – смяната на шрифт. В по-старите версии на HTML това е ставало чрез таг <font>, но той вече е отменен и на негово място се използват стилове. Истината е, че браузърите все още го поддържат напълно и все още се употребява доста често. Въпреки това няма да го разглеждаме и ще наблегнем на съвременния вариант с използване на стилове. Ето как можем да сменяме шрифт:

<p>Ето как можем да променим
	<span style="font-family:Arial">
		шрифт на текст в arial
	</span>
	или например във
	<span style="font-family:verdana">
		шрифт verdana.
	</span><br />
	Шрифтът на повечето браузъри по подразбиране е
	<span style="font-family:times new roman">
		times new roman
	</span>
</p>

Резултат:

Ето как можем да променим шрифт на текст в arial или например във шрифт verdana.
Шрифтът на повечето браузъри по подразбиране е times new roman

Много важно е да дефинираме шрифтът с който пишем в HTML страницата си. Дори да използваме шрифт по подразбиране – не може да сме сигурни дали потребителят не го е сменил. Това например в Internet Explorer става чрез „Tools > Internet Options > Fonts“. Ако потребителя е сменил шрифта си по подразбиране, то не сме сигурни как ще изглежда нашата интернет страница. Затова допълнителният труд на дефинирането на шрифт никога не е излишен. Силно бихме искали да ви насърчим винаги да дефинирате шрифта, който желаете да използвате!

Следващият важен момент е размера на шрифта. Често ни се налага да пишем някои изречения по-големи от други. Понякога просто искаме шрифта да е по-едър, за да може да се чете по-добре или напротив – да го направим по-малък, когато трябва да се доуточнява. Всичко това се извършва със стил font-size. Класическото използване е в „points“ – така както се пише например в Microsoft Word:

<p><span style="font-size:10pt">
	Този шрифт е с размер 10pt
</span><br />
<span style="font-size:24pt">
	а този е с размер 24pt
</span>
</p>

Резултат:

Този шрифт е с размер 10pt
а този е с размер 24pt

Възможно е да се използват и пиксели като размерност. Впрочем това е по-добре от гледна точка на напасване на текста към полетата, в които пишем. Винаги е по-добре да използваме едни и същи мерни единици за оразмеряване на обектите.

Рядко използвана, но интересна възможност е използването на „малки главни букви“. Това е специфичен стил на писане на текст, който понякога се използва за по-добра четимост – например при бутони, менюта и др. Най-лесно ще е да го демонстрираме чрез пример:

<div style="font-variant:small-caps">Този шрифт е съставен от "малки главни букви"</div>

Резултат:

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

Остава да отговорим на важен въпрос – кои шрифтове са позволени? Истината е, че можем да използваме всеки възможен TTF (true type font). CSS ни дава възможност даже да добавяме шрифтове, които не са налични на компютъра на потребителя, като ги качваме като файлове на сървъра. Тази практика обаче все още е спорна.

За напълно стандартни можем да сметнем следните шрифтове: arial, arial black, comic sans ms, courier, courier new, georgia, helvetica, impact, palatino, times new roman, trebuchet ms, verdana. Те са налични както в Windows, така и в MacOS и Linux. Затова можем да сме спокойни, че потребителите винаги ще могат да визуализират страниците ни по един и същи начин. За всеки един друг шрифт ние препоръчваме да качвате шрифта на сървъра и да го добавяте като „downloadable font“. За това ще напиша отделна статия по-късно. Засега можете да използвате следните стилове като ги сметнете за напълно стандартни и съвместими с всички браузъри и операционни системи:

font-family: Arial, Helvetica, sans-serif;
font-family: ‘Arial Black’, Gadget, sans-serif;
font-family: ‘Bookman Old Style’, serif;
font-family: ‘Comic Sans MS’, cursive;
font-family: Courier, monospace;
font-family: ‘Courier New’, Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: ‘Lucida Console’, Monaco, monospace;
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
font-family: ‘MS Sans Serif’, Geneva, sans-serif;
font-family: ‘MS Serif’, ‘New York’, sans-serif;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: ‘Times New Roman’, Times, serif;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;

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

П.П. Списъкът е взет от fonttester.com.