CSS :: Шрифты
Шрифты в CSS
Говоря о внешнем виде текста нельзя не затронуть тему шрифтов, которые самым прямым образом влияют на восприятие текста и его читабельность.
Шрифт – набор символов определенного размера и рисунка, презназначенных для набора текста.
Как следует из определения, изменяя рисунок символов, а также их размер, можно получать различные виды шрифтов, которые будут соответствовать общему дизайну сайта, делая его более уникальным и неповторимым. Взгляните на пример №1, на котором представлено применение к одному и тому же фрагменту текста нескольких видов шрифта.
<!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).
<!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).
<!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). В случае отсутствия значения какого-нибудь свойства браузер использует значение по умолчанию.
<!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 – шрифт, использующийся для строки состояния окон.
Быстрый переход к другим страницам
- Оформление внешнего вида текста
- Определение характеристик шрифтов
- Оформление внешнего вида списков
- Вернуться к оглавлению учебника