CSS предоставя множество свойства за настройка на изгледа на шрифта. Те включват избор на шрифт, стил на шрифта и сянка.
Сред CSS свойствата за шрифт влизат информация за шрифт, стил на шрифт и дебелина на шрифта. Тези свойства са полезни предимно за HTML елементи, съдържащи текст (p, i и други). Те могат да бъдат използвани и за таблиците.
Чрез font-family се определя използваният шрифт.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
p {font-family:verdana, sans-serif;}
h1 { font-family:"Courier New", Courier, monospace; }
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Това е параграф с получерена дума.</p>
<h2>Това е заглавие с получерена дума.</h2>
</div>
</body>
</html>Резултатът в браузъра изглежда по следния начин:
Типични шрифтове са например Arial, Helvetica и Times Roman. С CSS свойството font-family се задават желаните шрифтове. При посочване на няколко шрифта редът им е от значение. Ако първият посочен шрифт е наличен, той се използва. Желаните шрифтове се посочват като отделени със запетаи. Обикновено на последно място се указва т.нар. обща шрифтова семейство. Чрез това общо шрифтово семейство се дава възможност на браузърите да изберат шрифт, който поне до известна степен е подобен на посочения.
• serif = шрифт с украски
• sans-serif = шрифт без украски
• cursive = шрифт за курсивно писане
• fantasy = шрифт за нестандартен текст
• monospace = шрифт с равни символи.
Стил на шрифта
Чрез свойството font-style може да се определи стила на шрифта. Ако избраният шрифт го позволява, чрез стойността italic може да се наложи курсивно написване.
Други шрифтове могат да бъдат наклонени с oblique.
Следващото CSS свойство, чрез което може да се променя изгледът на шрифта, се нарича font-variant. Чрез него могат да се дефинират така наречените капителки.
За това се посочва на font-variant стойността small-caps.
Размер на шрифта
Много важно е също посочването на размера на шрифта. За тази цел CSS предоставя свойството font-size. Размерите на шрифта могат да бъдат посочени в различни единици.
• EM
• REM
• Пиксели
• Проценти
• Ключови думи
Като ключови думи са налични следните варианти:
• xx-small – много, много малък
• x-small – много малък
• small – малък
• smaller – по-малък от родителския елемент
• medium – среден
• large – голям
• x-large – много голям
• xx-large – много, много голям
• larger – по-голям от родителския елемент
Ето един пример как се задава размерът на шрифта:
.eins {font-size: 10px;}
.zwei {font-size: 20px;}
.drei {font-size: 110%;}
.vier {font-size: xx-large;}И ето как изглежда цялото в браузъра:
Моля, обърнете внимание, че дефинирането на размера на шрифта е много сложна тема, защото различните единици за измерване имат своите предимства и недостатъци.
Добър обзор за това, коя мерна единица трябва да бъде използвана кога, можете да намерите на страницата http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. Толкова за всички, които не искат да четат: Използвайте относителни стойности като em за показване на екран. За дизайни за печат обаче е по-добре да се използват абсолютни единици като pt.
Дебелина на шрифта
Продължаваме с т.нар. дебелина на шрифта. Чрез това се определя дебелината и силата на шрифта. За тази цел се използва свойството font-weight.
.fett {
font-weight:bold;
}
С този синтаксис избраният текст се показва в удебелен шрифт.
Възможни стойности са bold (удебелен), bolder (особено удебелен), lighter (по-тънък) и normal. Също така се позволяват числени стойности като 100, 200, 300, 400, 500, 600, 700, 800 и 900. Те покриват обхват от много тънък (100) до особено удебелен (900).
Обобщаване на дефинициите
В контекста на дефинициите за шрифтове, важна роля играе и свойството line-height, чрез което се дефинира височината на реда. Ще се върна отново по-подробно по този въпрос по-късно. На този етап просто трябва да бъде споменато, защото играе определена роля във връзка с посоченото по-долу свойство font.
Можете да комбинирате представените до момента данни за изобразяване на текст. За целта се използва общото свойство font. Това включва следните елементи или ги включва.
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
Чрез font можете да комбинирате различни форматиране на шрифтове помежду си. Можете да посочите посочените по-горе свойства, но не е задължително да ги използвате всички. Задължителни са обаче свойствата за размера на шрифта и семейството на шрифта.
Благодарение на краткия запис, CSS файловете могат да бъдат по-кратки и по-удобни за поддръжка.
Трябва да се спазва последователността, представена по-долу. Ако двата елемента font-size и line-height се записват, те трябва да бъдат разделени с наклонена черта. Ако на това място се посочена само една стойност, тя се отнася за font-size.
Пример:
p {
font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif;
}font-size-adjust е разработено, за да позволи приблизително еднакво големи шрифтове да бъдат показани. Различните шрифтове имат различни височини на x. Въпреки това шрифтовете с по-голяма височина на x са по-лесно четими. Така може да се случи, че документ е труден за четене, когато оригиналният шрифт липсва и се замества с друг с по-малка височина на x. Чрез font-size-adjust този разлик се изравнява.
Пример:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
В следващото урок ще научите други възможности, с които можете да настроите изгледа на текста на уебсайта си.
