Язык CSS
Шрифты и их свойства.


Гарнитура шрифта

Для задания параметров шрифтов в CSS используется свойство font-family элемента font. Это свойство задает гарнитуру шрифта.
Все шрифты можно условно разделить на несколько групп:

  • Serif - шрифты с засечками, например, Times New Roman;

  • Sans-serif - шрифты рубленые, без засечек, например, Arial;

  • Monospace - моноширинные шрифты, например, Courier New;

  • Cursive - курсивные шрифты, например, Calisto MT;

  • Fantasy - декоративные шрифты, например, Torhok.

Вот примеры написания разными группами шрифтов:
Разные группы шрифтов
В качестве значения свойства font-family можно указать шрифт и группу шрифтов.
Например:


body{
font-family:Verdana, sans-serif}


Теперь весь текст страницы будет написан шрифтом Verdana, но если на компьютере пользователя такого шрифта не окажется, то будет использоваться любой другой из группы sans-serif. То есть будет подобран шрифт наиболее близкий ему по виду, и внешний вид страницы будет не очень отличаться от задуманного. Можно указать несколько шрифтов через запятую, в порядке убывания приоритета.


Стиль шрифта

Другое свойство элемента font, font-style, задает стиль шрифта:

  • normal - обычный;

  • oblique - наклонный, курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо;

  • italic - курсивный.

Попробуем на практике. Сделаем html-документ с тремя параграфами (скопировать любые 3 из текста лекции), зададим каждому уникальный идентификатор:
<p id=”sn”>Текст в параграфе с идентификатором sn.</p>
<p id=”so”>Текст в параграфе с идентификатором so.</p>
<p id=”si”>Текст в параграфе с идентификатором si.</p>
Зададим в таблице стилей шрифт для всех параграфов:
p#sn, p#so, p#si{
font-family: Verdana, sans-serif}
Проверьте результат в браузере.
Теперь давайте зададим каждому параграфу свой стиль:
p#sn, p#so, p#si{
font-family: Verdana, sans-serif}
p#sn{
font-style:normal}
p#so{
font-style:oblique}
p#si{
font-style:italic}
Проверьте результат в браузере.

Наклонный стиль вроде бы не отличается от курсивного. Дело в том, что различные шрифты включают в себя различные варианты начертания (bold, italic, regular и другие). Но, если в какой-либо шрифт не включен вариант italic, то он имитируется простым наклоном букв, что и соответствует значению oblique.
По умолчанию используется стиль normal.


Вариант написания букв

Свойство font-variant задает вариант написания букв из двух возможных:

  • normal - обычный;

  • small-caps - малые прописные буквы.

По умолчанию это свойство имеет значение normal.
Попробуем на практике. Давайте изменим таблицу стилей нашего документа:
p#sn, p#so, p#si{
font-family: Verdana, sans-serif}
p#so{
font-variant:small-caps}
Проверьте результат в браузере.


Толщина букв шрифта

Font-weight. Это свойство задает толщину букв шрифта. В качестве значений выступают числа: 100, 200, 300, 400, 500, 600, 700, 800 и 900. А также ключевые слова:

  • normal - нормальный;

  • bold - полужирный;

  • bolder - более жирный по отношению к базовому, унаследованному от предка;

  • lighter - менее жирный по отношению к базовому, унаследованному от предка.

При этом значению normal соответствует числовое значение 400, а значению bold - 700.
Попробуем на практике. Давайте зададим это свойство второму параграфу нашего документа:
p#so{
font-weight:bold}
Проверьте результат в браузере.

! Windows поддерживает только 2 градации толщины шрифта.


Размер шрифта элемента

Font-size. Определяет размер шрифта элемента.
Размер может быть установлен несколькими способами.
Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задает размер, который называется абсолютным. Их соответствие с размером шрифта в HTML приведено в таблице:

Размер шрифта

По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.


Другой набор констант (larger, smaller) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.
В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.


Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др.


За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются.
Значение Inherit - наследует значение родителя (некоторыми браузерами не поддерживается).


Попробуем на практике. Давайте зададим размер шрифта 18 пикселов, для второго параграфа увеличим его на 20%, а для третьего - уменьшим на 10% от базового:
body{
background-image:url(riba.gif);
background-size:100%;
font-size:18px}

p#sn, p#so, p#si{
font-family:Verdana; sans-serif}


p#sn{
font-style:normal; font-weight:bold}


p#so{
font-size:120%}


p#si{
font-style:italic; font-size:90%}

Проверьте результат в браузере.


Мы рассмотрели свойства шрифтов. Их можно применять ко всем элементам. В следующий раз будем изучать возможности управления текстом в CSS.


Источники:


← Язык CSS. Свойства - color (цвет) и background (фон). Язык CSS. Свойства - текст. →


comments powered by Disqus