Главная
К библиотеке

font-family

На моих страницах в качестве основного шрифта используется шрифт Verdana, который разработан специально для экранных текстов. К таким же шрифтам относятся семейства Tahoma и Georgia.

Задается это следующим правилом:

BODY {
   font-family: Verdana, Arial, Helvetica;
}

Возникает законный вопрос, зачем в данном правиле указано целых три семейства шрифтов? Это необходимо, так как, если на компьютере клиента отсутствует семейство Verdana, а в правиле указано только оно, то разработчик не может предположить, как страница будет выглядеть на экране пользователя. В том, случае, когда в правилах указано несколько семейств, браузер будет последовательно перебирать все перечисленные, пока не найдет того, которое присутствует на машине клиента. Таким образом, приведенное выше правило, говорит, о том, что в случае отсутствия семейства Verdana, необходимо использовать семейство Arial, а если уж и этого нет, то использовать стандартное семейство Helvetica.

Браузер при запуске сам распределяет имеющиеся семейства для подстановки вместо стандартных. Используя эти правила, я могу с определенной уверенностью сказать, что мои страницы смотрятся на большинстве компьютеров, практически, одинаково.

Существует очень много семейств шрифтов. Стандартными являются следующие:

Варианты семейств должны разделяться запятыми, а, если название семейства состоит из нескольких слов, рекомендуется заключать его в апострофы или кавычки: 'new century schoolbook'

Бесплатный совет: шрифты семейств Verdana, Tahoma и Georgia являются свободно доступными. Например, их можно взять на сайте Microsoft©, а, так же, они распространяются вместе с Windows 98™ (только Verdana и Tahoma). Скачайте и установите их, так как они специально разработаны для представления текстов на экране.

font-style

Здесь все просто и особых комментариев не требует. Это начертание шрифта. normal - нормальное, italic - италик, oblique - наклонное, правда, интернет эксплорер отображает его, как italic.

font-variant

Вариант начертания. small-caps - все заглавные

font-weight

Задает толщину шрифта. Обычно используется только значение bold. Это означает, что элемент будет отображен полужирным шрифтом.

На самом деле все несколько сложнее. В следующей табличке приведены все возможные значения этого правила.

Значения bolder и lighter являются относительными. Т.е. если элемент является дочерним к элементу со значением font-weight: bold и правило font-weight для него задано lighter, то он будет отображен нормальным шрифом. Например: Эта фраза содержит слово с правилом font-weight: lighter и слово с правилом font-weight: bolder.

font-size

Задает размер шрифта. Возможно несколько вариантов указания размеров:

Кроме того, можно задать интерлиньяж (высоту строки). Делается это так:

font: 10pt/6pt
font: 10pt
font: 10pt/18pt
font: 10pt/24pt

Вот код:

<SPAN STYLE="font: 10pt/6pt">font: 10pt/6pt</SPAN><BR>
<SPAN STYLE="font: 10pt">font: 10pt</SPAN><BR>
<SPAN STYLE="font: 10pt/18pt">font: 10pt/18pt</SPAN><BR>
<SPAN STYLE="font: 10pt/24pt">font: 10pt/24pt</SPAN>

Здесь использована краткая форма записи правил отображения шрифта. Далее я о ней расскажу подробнее.

@font-face

Новая технология встроенных шрифтов (embeded fonts) позволяет использовать в оформлении страницы те шрифты, которых нет на клиентской машине. Для этого необходимо подготовить файл типа OpenType (.eot, .ote), который содержит сжатые данные, которые преобразуются в шрифт TrueType на клиентской машине. Дополнительную информацию можно почерпнуть на сайте Microsoft. А бесплатную утилиту для работы с такими шрифтами Microsoft Web Embedding Fonts Tool можно скачать на соответствующей странице.

Сокращенная форма font

Для краткой записи свойств шрифта используется сокращенная форма font. Правила для шрифта перечисляются в принятой в типографике системе задания параметров шрифтов:

Специальные типы шрифта caption, icon, menu, message-box, small-caption, status-bar соответствуют следующим шрифтам, установленным на клиентской машине:

Разбор краткой формы происходит следующим образом. Каждому правилу задаются значения по умолчанию (зависит от конкретного браузера и его настроек). Далее те значения, которые указаны в правилах - присваиваются, а неуказанные остаются такими, какими они были заданы на первом этапе.

Пример использования краткой формы записи правил отображения шрифта:

<SPAN STYLE="font: oblique 12pt Verdana, serif; color: red">
Фраза с краткой формой записи правил
</SPAN>

Примеры использования

SPAN.test {
  font-family: Helvetica;
  font-style: italic;
  font-variant: small-caps;
  font-weight: 900;
  font-size: 2em; 
}

и далее: <SPAN CLASS="test">Тестовая фраза</SPAN>.
Тестовая фраза

SPAN.test1 {
  font: italic small-caps 900 2em Helvetica;
}

и далее: <SPAN CLASS="test1">Тестовая фраза</SPAN>.
Тестовая фраза

Описание правил может содержать, как краткую, так и развернутую форму. Например

SPAN.test2 {
  font: italic small-caps 900 2em;
  font-family: Helvetica;
}

и далее: <SPAN CLASS="test2">Тестовая фраза</SPAN>.
Тестовая фраза

http://exper.ural.ru/