Далее на странице...
В этой статье рассмотрим свойства CSS, использующиеся при оформлении шрифта. Практически на любой веб странице преобладает текстовая информация, поэтому без знания основных правил, определяющих отображение шрифта «далеко не шагнешь».
Семейство шрифта
Свойство font-family предназначено для указания семейства шрифта, которое будет использоваться при оформлении текста в элементе.
Если свойство font-family не указано, то используется шрифт, установленный в браузере по умолчанию. Если Вам необходим какой-то определенный шрифт, нужно указать его название (подробнее здесь...).
Можно указать названия нескольких шрифтов через запятую. В этом случае для оформления текста элемента браузер воспользуется первым шрифтом из перечня, если он установлен на компьютере пользователя. Если такового нет, браузер воспользуется вторым шрифтом. И он отсутствует - тогда третьим и т.д.
Если указать семейство шрифтов, то браузер воспользуется одним из шрифтов из этого семейства.
Самый практичный вариант - указать названия нескольких шрифтов, а затем одно из семейств.
Если в названии шрифта имеются пробелы, то его необходимо заключить в двойные или одинарные кавычки.
Свойство применимо ко всем элементам.
<head>
<title> Семейство шрифта </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p> Для оформления текста в параграфах данного документа я указал два шрифта из семейства monospace и название самого семейства. </p>
<p> Браузер воспользуется одним из указанных шрифтов, либо другим шрифтом из семейства monospace. </p> </body>
p {font-family:'Courier New', Courier, monospace;}
Для оформления текста в параграфах данного документа я указал два шрифта из семейства monospace и название самого семейства.
Браузер воспользуется одним из указанных шрифтов, либо другим шрифтом из указанного семейства.
Размер шрифта
Размер шрифта элемента можно установить при помощи свойства font-size.
В CSS есть такое понятие как абсолютный размер шрифта, который задается с помощью ключевых слов xx-small, x-small, small, medium, large, x-large и xx-large; и понятие относительный размер шрифта - задается с помощью слов larger и smaller, которые устанавливают размера шрифта соответственно больше и меньше на одно значение относительно его текущего размера.
Также размер шрифта можно задать в % и в любых допустимых единицах CSS (подробнее здесь...).
Свойство применимо ко всем элементам.
<p style="font-size:15px;"> Установлен размер шрифта для данного абзаца - 15 пикселей. <span style="font-size:larger;"> Теперь размер шрифта больше относительно установленного. </span></p>
Установлен размер шрифта для данного абзаца - 15 пикселей. Теперь размер шрифта больше относительно установленного.
Начертание шрифта
Свойство font-style устанавливает стиль написания шрифта.
По умолчанию, а также если свойству font-style присвоено значение normal, браузер отображает шрифт без наклона.
Но кроме стандартного стиля существует курсивный и наклонный шрифт - значения italic и oblique соответственно. Курсивный шрифт имитирует рукописный, а наклонный образуется наклоном стандартных букв на определенный угол.
Свойство применимо ко всем элементам.
<p> Стандартный шрифт. </p>
<p style="font-style:oblique;"> Наклонный шрифт. </p>
Стандартный шрифт.
Наклонный шрифт.
Насыщенность шрифта
Свойство font-weight позволяет задать насыщенность (толщину) шрифта.
Насыщенность шрифта задается в условных единицах от 100 до 900 с шагом 100 или с помощью ключевых слов: lighter - светлый шрифт, normal - нормальный шрифт, bold - полужирный шрифт и bolder - жирный шрифт.
По умолчанию шрифт соответствует значению normal или 400 условным единицам.
Свойство применимо ко всем элементам.
<p> Нормальный шрифт. </p>
<p style="font-weight:700;"> Жирный шрифт. </p>
Нормальный шрифт.
Жирный шрифт.
Строчные и заглавные буквы. Капитель
Свойство font-variant устанавливает характер написания строчных букв.
Значение small-caps этого свойства позволяет отобразить текст Капителью - это когда строчные буквы представлены малыми заглавными. По умолчанию свойство имеет значение normal, что соответствует стандартному написанию строчных букв.
Свойство применимо ко всем элементам.
<p> Строчные буквы в привычном для всех виде. </p>
<p style="font-variant:small-caps;"> Строчные буквы преобразованы в малые заглавные. </p>
Строчные буквы в привычном для всех виде.
Строчные буквы преобразованы в малые заглавные.
Универсальное свойство
Свойство font является универсальным свойством, позволяющим одновременно указать значения всех свойств, связанных со шрифтом.
Значения свойств указывают через пробел, в любом порядке. А браузер автоматически определяет принадлежность значения свойству.
Не обязательно указывать значения всех свойств. Не используемым свойствам присваиваются значения по умолчанию.
Свойство применимо ко всем элементам.
<p style="font: italic 18px Georgia, 'Times New Roman', Times, serif;"> В данном абзаце текст оформлен курсивом. Установлен шрифт Georgia размером 18 пикселей. </p>
В данном абзаце текст оформлен курсивом. Установлен шрифт Georgia размером 18 пикселей.
