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>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</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;
}
В следующем руководстве вы узнаете о дополнительных способах, с помощью которых можно настроить внешний вид текста на вашем веб-сайте.
