Стандартният начин за дефиниране на шрифтове изглежда приблизително по следния начин:
body {
font-family: Arial, Helvetica, sans-serif;
}Тук на елемента body се присвоява шрифта Arial. Ако този шрифт не се намира на системата на зрителя, се преминава на Helvetica. Ако няма и Helvetica, браузърът се насочва към използването на поне един шрифт без зъбци. В действителност това не може да бъде контролирано. Така че в крайна сметка нямате истински контрол върху резултата. Това, което сте красиво настроили в GIMP или Photoshop, може да се загуби в джунглата на шрифтовете. Повече за това как може да бъде решена тази проблематика ще разберете по-долу.
Но сега отново към класическия начин. По-долу ще намерите типично дефиниране, с което се променя основния изглед на уебсайта. Чрез дефиницията за body можете първоначално да определите основните шрифтови настройки.
body {
font-family: Georgia, Times, "Times New Roman", serif;
color: #000;
font-size: 1.1em;
line-height: 150%;
}
p {
font-size: 1.1em;
}
Разбира се, след това можете да стилизирате отделните елементи на страницата. Това включва заглавията, курсивни пасажи и други. Обаче помнете отново принципа на наследяване в CSS при този контекст.
h1 {
font-size: 1.6em;
}Резултатът в браузъра може да изглежда по следния начин:
Използване на уеб шрифтове
Проблемът с традиционните дефиниции на шрифтове е ясен: В крайна сметка не можеш наистина да бъдеш сигурен, че посочените от вас шрифтове са налични на зрителя. Браузърите, ако не открият шрифта, избират един по подразбиране, който е подобен на този, който искате вие. Така че в действителност нямате истински контрол над резултата. Точно в този момент @font-face предоставя решение. Чрез него може ясно да се посочи кои шрифтове да се използват. Този тънчев да функционира принципно е същият като при картините. С други думи, трябва да се посочи пътят към файла с шрифтове.
В модерните браузъри се използват така наречените WOFF уеб шрифтове за @font-face. Тези шрифтове са значително по-малки от предишно използваните уеб шрифтове във формати EOT и TTF.
Типично дефиниране на @font-face изглежда по следния начин:
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
Името на използвания шрифт се записва в font-family. До тук няма специални синтактични особености. Чрез src:url() се указва URL адресът, на който се намира файла с уеб шрифтове. Ако теоретично съществува възможност шрифтът да е наличен на устройствата на потребителите, се препоръчва допълнително да се посочи local. На този local се присвоява името на шрифта.
@font-face {
font-family: "Bitstream Vera Serif Bold";
local: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
След дефиницията на @font-face уеб шрифтовете могат да се използват нормално.
h1 {
font-family: "Bitstream Vera Serif Bold";
font-size: 1.2em;
color: #3399FF;
}Тук може да намерите уеб шрифтове например
Сега се появява въпросът откъде може да се спечелят съответните файлове на уеб шрифтове. Google предлага множество от тези уеб шрифтове на страницата http://www.google.com/fonts.
Тези шрифтове могат да бъдат вграждани директно чрез посочената страница.
Търсейки фонтове, съответстващи на вкуса ви, можете да изберете няколко уеб шрифта на страницата, след което кликнете вдясно на Add to Collection. Когато всички уеб шрифтове са във вашата колекция, щракнете в долната част на страницата върху Use. Показва се директно като скала.
С помощта на този изображение можете да видите въздействието, което вграждането на уеб шрифтове има върху времето за зареждане на страницата. Тези влияния са реални и се увеличават с всяка допълнителна уеб шрифт.
Колко лесно може да се използват няколко уеб шрифта, които предварително сте добавили към своята колекция, показва следният пример:
<link href="http://fonts.googleapis.com/css? family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">
Така че отделните уеб шрифтове се записват последователно, разделени със знак за вертикална черта. Пълното извикване, което отговаря на избраната колекция, се показва на вече споменатата Use-страница.
Много от уеб шрифтовете предлагат така наречени подмножества като латиница или кирилица. За да ги включите изрично, задавате желаното подмножество като стойност на параметъра.
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic
Ако искате да използвате няколко от тези подмножества, ги записвате, разделени със запетая.
http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic
Въпреки това използването на този уеб шрифт не е безспорно поради съвсем различни причини. Най-важното е, че при зареждане на страницата се изисква връзка със сървър на Google. Това може да се избегне, като изтеглите уеб шрифтовия файл и го качите на своя сървър. Внимавайте обаче винаги да спазвате условията за използване на уеб шрифтовете, които искате да използвате по този начин.
Дефиниция на шрифта на примерната страница
По-долу ще намерите дефинициите на шрифтовете, които ще използвам за текущата примерна страница:
body {
font-family: 'Crimson Text', Helvetica, sans-serif;
color: #444;
text-decoration: none;
line-height: 1.5em;
font-size: 1.2em;
}
p {
font-size: 1.1em;
}
h1 {
font-size: 1.6em;
color: #3399FF;
}
Разбира се, можете да добавите допълнителни елементи. В текущия случай този синтаксис е достатъчен.
