CSS :: Шрифты
Шрифты в CSS
Говоря о внешнем виде текста нельзя не затронуть тему шрифтов, которые самым прямым образом влияют на восприятие текста и его читабельность.
Шрифт – набор символов определенного размера и рисунка, презназначенных для набора текста.
Как следует из определения, изменяя рисунок символов, а также их размер, можно получать различные виды шрифтов, которые будут соответствовать общему дизайну сайта, делая его более уникальным и неповторимым. Взгляните на пример №1, на котором представлено применение к одному и тому же фрагменту текста нескольких видов шрифта.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Шрифты</title>
<style>
.f_1{
font-family: arial, tahoma, sans-serif;
}
.f_2{
font-family: gabriola;
}
.f_3{
font-family: "high tower text", sans-serif;
}
.f_4{
font-family: "monotype corsiva", serif;
}
.f_5{
font-family: verdana, arial;
}
</style>
</head>
<body>
<p class="f_1">
Ко мне применяется шрифт Arial.
</p>
<p class="f_2">
Ко мне применяется шрифт Gabriola.
</p>
<p class="f_3">
Ко мне применяется шрифт семейства sans-serif.
</p>
<p class="f_4">
Ко мне применяется шрифт Monotype Corsiva.
</p>
<p class="f_5">
Ко мне применяется шрифт Verdana.
</p>
</body>
</html>
Пример №1. Использование различных видов шрифта
Разновидностей шрифтов довольно много, одни из них получили широкое распространение и по умолчанию входят в состав большинства операционных систем и различного рода программ, другие нужно устанавливать из сторонних источников в зависимости от потребностей и желания пользователей. Что касается браузеров, то они используют шрифты операционной системы, т.к. свои встроенные шрифты у них отсутствуют.
Установка шрифта и css-свойство font-family
Для того, чтобы указать шрифт, который будет использоваться внутри требуемого элемента, необходимо использовать наследуемое свойство font-family, в качестве значения которого нужно указать через запятую имена шрифтов или названия семейства шрифтов (см. пример №1). Если в названии шрифта содержатся пробелы, то его нужно указывать в кавычках. Также при выборе шрифтов необходимо учитывать тот факт, что в операционных системах разных пользователей могут быть установлены собственные наборы шрифтов. Поэтому, если хочется применить к элементу какой-нибудь экзотический шрифт, нужно обязательно учитывать эту особенность. В таких случаях обычно первыми указывают редкие шрифты, затем более распространенные, а в конце указывают семейство шрифтов. Если браузер не находит первого шрифта на компьютере пользователя, он начинает искать второй шрифт и так до конца списка указанных в качестве значения шрифтов. Это повышает вероятность того, что хотя бы один и указанных шрифтов будет на компьютере пользователя. Если указанных шрифтов не обнаружено, браузер начинает самостоятельно подбирать шрифты из указанного списка семейств шрифтов.
В любой операционной системе по умолчанию доступны следующие стандартные семейства шрифтов:
- serif – шрифты с засечками;
- sans-serif – шрифты без засечек (рубленые шрифты);
- cursive – курсивные шрифты (часто напоминают рукописный текст);
- fantasy – декоративные (художественные) шрифты;
- monospace – моноширинные шрифты (все буквы одинаковой ширины).
Если указанные в качестве значения свойства font-family шрифты не будут найдены браузером на компьютере пользователя, а название семейства шрифтов будет отсутствовать, то браузер использует шрифт, установленный по умолчанию. Обычно это шрифт Times New Roman.
Размер шрифта и css-свойство font-size
CSS позволяет также задать ряд других характеристик шрифта: размер, начертание, насыщенность. Так размер задается наследуемым свойством font-size, которое в качестве значений принимает все доступные в CSS единицы измерения, проценты, которые считаются относительно размера шрифта родительского элемента, и ряд специальных значений: xx-small, x-small, small, medium (по умолчанию), large, x-large, xx-large, smaller, larger, где последние два значения определяют, соответственно, размер меньший или больший, чем у родительского элемента (см. пример №2).
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Установка размера шрифта</title>
<style>
.size_1{
font-size: smaller;
}
.size_2{
font-size: medium;
}
.size_3{
font-size: larger;
}
.size_4{
font-size: 150%;
}
.size_5{
font-size: 1.5em;
}
</style>
</head>
<body>
<p class="size_1">
font-size: smaller;
</p>
<p class="size_2">
font-size: medium;
</p>
<p class="size_3">
font-size: larger;
</p>
<p class="size_4">
font-size: 150%;
</p>
<p class="size_5">
font-size: 1.5em;
</p>
</body>
</html>
Пример №2. Определение размера шрифта
Кстати, не стоит забывать, что установка размера шрифта родительского элемента может повлиять на рамеры других элементов-потомков, которые будут заданы в относительных единицах, например, в em. Ведь такие относительные единицы прямым образом зависят от размера шрифта родительского элемента.
Насыщенность шрифта и css-свойство font-weight
Насыщенность (жирность) шрифта устанавливается при помощи наследуемого свойства font-weight, принимающего ряд значений, определяющих степень жирности: normal (по умолчанию), bold, bolder, lighter и числа от 100 до 900 с шагом 100, где bolder и lighter определяют, соответственно, жирность меньшую или большую, чем у родительского элемента (см. пример №3).
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Установка насыщенности шрифта</title>
<style>
p{
width: 400px;
margin: 2em;
}
.weight_1{font-weight: normal;}
.weight_2{font-weight: bold;}
.weight_3{font-weight: bolder;}
.weight_4{font-weight: lighter;}
.weight_5{font-weight: 600;}
</style>
</head>
<body>
<p class="weight_1">
normal соответствует значению 400,
значения 100, 200, 300 не будут работать.
</p>
<p class="weight_2">
bold соответствует значению 600.
</p>
<p class="weight_3">
У родительского элемента, т.е. у тела документа,
по умолчанию браузер использует жирность normal,
поэтому значение bolder повышает ее до bold.
</p>
<p class="weight_4">
lighter не сработает, т.к. браузеры на данный
момент поддерживают только значения 400 и 600.
</p>
<p class="weight_5">
600 соответствует bold.
</p>
</body>
</html>
Пример №3. Установка насыщенности шрифта
На данный момент значения 100 – 500 свойства font-weight соответствуют нормальному начертанию шрифта, а 600 – 900, соответственно, жирному начертанию. В дальнейшем возможно станут доступны и остальные числовые значения.
Стиль шрифта и css-свойство font-style
Кроме насыщенности, конечно же, нас интересует и возможность выделять слова и фрагменты текста курсивом. CSS дает нам такую возможность за счет применения наследуемого свойства font-style, которое определяет начертание шрифта и может принимать следующие значения:
- normal – шрифт отображается стандартным способом; значение используется браузером по умолчанию;
- italic – шрифт отображается курсивом;
- oblique – шрифт отображается наклонным.
Следует отметить, что понятия курсивного и наклонного начертания несколько различаются, поскольку курсивное начертание предусматривает наличие специального шрифтового набора символов со скругленными формами штрихов, что делает его похожим на рукописный текст, а наклонное начертание представляет собою всего лишь обычный прямой шрифт слегка наклоненный вправо. Более того, не всякий шрифт предусматривает курсив, поэтому даже в случае указания в свойстве font-style значения italic, символы в них будут отображаться просто наклонными.
Также хотелось бы напомним, что все свойства CSS могут принимать значение inherit, которое сообщает браузеру о том, что значение свойства должно быть унаследовано от родителя.
Капитель и css-свойство font-variant
Иногда на сайтах можно увидеть, что вместо строчных букв используются прописные, но малого размера. Такой прием в типографике называют капителью. Делается это при помощи наследуемого свойства font-variant, которое может принимать два значения normal (браузер будет отображать символы стандартным способом) и small-caps (браузер будет конвертировать символы в капитель).
Сокращенное css-свойство font
Итак, чтобы изменять различные характеристики шрифта можно воспользоваться одним из доступных свойств: font-family, font-size, font-weight, font-style, font-variant. Однако в CSS имеется возможность задать через пробел несколько характеристик шрифта одновременно в одном сокращенном наследуемом свойстве font. При этом размер шрифта и его семейство должны указываться обязательно. Также имеет значение порядок указания значений свойств: первыми, если они конечно будут указываться, должны записываться значения свойств font-style, font-variant или font-weight в любом порядке, затем необходимо указывать значение свойства font-size, а также при необходимости через слеш / значение свойства line-height, в конце указывается значение свойства font-family (см. пример №4). В случае отсутствия значения какого-нибудь свойства браузер использует значение по умолчанию.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Сокращенное свойство font</title>
<style>
.font_1{
font: 1.2em/25px serif;
}
.font_2{
font: bold italic 0.9em "courier new", serif;
}
.font_3{
font: normal small-caps 1em/1.2em verdana;
}
</style>
</head>
<body>
<p class="font_1">
font_1{font: 1.2em/25px serif;}.<br>
Здесь указаны размер, высота строки и семейство.
</p>
<p class="font_2">
font_2{font: bold italic 0.9em "courier new", serif;}.<br>
Здесь – насыщенность, начертание, размер, шрифт + семейство.
</p>
<p class="font_3">
font_3{font: normal small-caps 1em/1.2em verdana;}<br>
Значение normal будет применено сразу к насыщенности<br>
и начертанию, т.к. оно присутствует у обоих свойств.
</p>
</body>
</html>
Пример №4. Одновременная установка нескольких характеристик шрифта
Следует добавить, что в качестве значений свойства font допускается указывать специальные ключевые слова, которые задают шрифт, использующийся в соответствующих элементах операционной системы пользователя:
- caption – шрифт текста элементов управления;
- icon – шрифт текста под иконками;
- menu – шрифт, использующийся в меню;
- message-box – шрифт диалоговых окон;
- small-caption – шрифт, использующийся для небольших элементов управления;
- status-bar – шрифт, использующийся для строки состояния окон.
Быстрый переход к другим страницам
- Оформление внешнего вида текста
- Определение характеристик шрифтов
- Оформление внешнего вида списков
- Вернуться к оглавлению учебника