| Параметры стиля шрифта | Значение | Описание |
font-family
(определяет список семейств шрифтов)
|
название шрифта | Обычно задаются несколько похожих шрифтов в порядке предпочтения.
Названия разделяются запятыми.
Если название шрифта состоит из нескольких слов, то оно заключается в кавычки.
Список шрифтов желательно завершить
родовым именем шрифта:
serif (для Times),
sans-serif (для Helvetica),
cursive,
fantasy,
monospace (для Courier) |
| | Пример:
<style>
h1 {font-family: "Times New Roman", serif}
</style>
<body style='font-family: Arial, Helvetica, sans-serif'>
|
font-size
(размер шрифта) |
относительный размер:
larger (больше);
smaller (меньше) | Значения интерпретируются относительно таблицы размеров шрифтов браузера и размера шрифта элемента-родителя.
В CSS1 масштабирующий множитель =1.5, в CSS2 - 1.2.
Размер можно задавать в % и в em. |
абсолютный размер:
xx-small,
x-small,
medium (по умолчанию),
large,
x-large,
xx-large,
|
Пример:
<style>
body {font-size: 12pt}
h1 {font-size: large}
h2 {font-size: 150%}
h3 {font-size: 12pt}
h4 {font-size: 75%}
</style>
<body>
<h1>Заголовок 1 <h1>
<h2>Заголовок 2 <h2>
<h3>Заголовок 3 <h3>
<h4>Заголовок 4 <h4>
</body>
Заголовок 1 и 3 заданы в абсолютных единицах,
а Заголовок 2 и 4 в % относительно размера шрифта, заданного для тега <body>, являющегося родительским (100%) элементом для заголовков.
|
Единицы измерения шрифта:
- em - высота шрифта элемента
{font-size: 2.5em}, - ex - высота символа "х"
{font-size: 2.3ex}, - pt - пункты
{font-size: 16pt}, - px - пикселы
{font-size: 12px}, - % - проценты
{font-size: 80%}.
|
font-weight
(жирность шрифта) |
normal | соответствует числу 400 |
| bold | Жирный (700) |
| bolder | Жирнее |
| lighter | Светлее |
| число | Одно из девяти целых чисел от 100 до 900 |
font-style
(стиль шрифта) |
normal | Нормальный прямой - по умолчанию |
| italic | Курсив |
| oblique | Наклонный |
font-variant
(вариант стиля шрифта) |
normal | по умолчанию и не влияет на отображение шрифта. |
| small-caps | Заменяет строчные буквы прописными, но делает их меньше по размеру, чем прописные буквы текущего шрифта.
Пример:
<style>
span {font-variant: small-caps}
</style>
Купи Слона! (до изменения стиля)
Купи Слона! (после изменения стиля)
|
font
(позволяет установить сразу несколько свойств шрифта в одном определении) |
font-style;
font-variant;
font-weight;
font-size;
line-height;
font-family |
Значения параметров указываются через пробел.
Если задается высота строки (line-height), то ее значение отделяется от размера шрифта (font-size) слэшем (/).
Если список шрифтов (font-family) содержит более одного элемента, то последние отделяются друг от друга запятыми. |
| | Пример:
<style>
body {font: italic 10pt/12pt "Times", serif}
</style> |
@font-fase
(указывает семейство шрифтов
и URL-адрес шрифта,
если он отсутствует на компьютере) |
font-family | Название семейства шрифтов. |
| src | URL-адрес шрифта. Синтаксис: src:url (URL-адрес)
Открывающаяся круглая скобка идет сразу за словом url
|
| | Пример:
<style>
@font-fase {font-family: MyFont;
src:url(http://myserver.ru/MyFont.eot)}
</style> |
Размер шрифта в em
Чтобы избежать проблем с масштабированием в Internet Explorer, можно использовать em вместо пикселей.
1em равен размеру шрифта по умолчанию.
Размер шрифта по умолчанию равен 16 пикселям.
Таким образом, 1em равен 16 пикселям.
Размер шрифта в em можно перевести из пикселей по формуле:
пиксели/16=em
- h1 {font-size:2.5em;} /* 40px/16=2.5em */
- Пример1 - размер 2.5em
- h2 {font-size:1.875em;} /* 30px/16=1.875em */
- Пример2 - размер 1.875em
- span {font-size:0.875em;} /* 14px/16=0.875em */
- Пример3 - размер 0.875em
