Font-family
Это свойство css задает гарнитуру шрифта. Все шрифты можно условно разделить на несколько групп:
Так вот в качестве значения свойства font-family можно указать шрифт и группу шрифтов. Например:
body{
font-family: Verdana, sans-serif;
}
Теперь весь текст страницы будет написан шрифтом Verdana, но если на компьютере пользователя такого шрифта не окажется, то
будет использоваться любой другой из группы sans-serif. То есть будет подобран шрифт наиболее близкий ему по
виду, и внешний вид страницы будет не очень отличаться от задуманного.
Вообще, можно указать несколько шрифтов через запятую, в порядке убывания приоритета.
Font-style
Это свойство css задает стиль шрифта: normal (обычный), oblique (наклонный), italic (курсивный). Пусть у нас есть html-страница с тремя параграфами, зададим каждому уникальный идентификатор:
<html>
<head>
<title>css шрифты</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="sn">Текст в параграфе с идентификатором sn.</p>
<p id="so">Текст в параграфе с идентификатором so.</p>
<p id="si">Текст в параграфе с идентификатором si.</p>
</body>
</html>
Зададим в таблице стилей шрифт для всех параграфов:
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
Это свойство css задает вариант написания букв из двух возможных: normal (обычный) и small-caps (малые прописные буквы). По умолчанию это свойство имеет значение normal. Давайте изменим таблицу стилей предыдущего примера на такую:
p#sn, p#so, p#si{
font-family: Verdana, sans-serif;
}
p#so{
font-variant:small-caps;
}
Теперь наша страница выглядет так:
Font-weight
Это свойство css задает толщину букв шрифта. В качестве значений выступают числа: 100, 200, 300, 400, 500, 600, 700, 800 и 900. А также ключевые слова: normal (нормальный), bold (полужирный), bolder (более жирный по отношению к базовому, унаследованному от предка) и lighter (менее жирный по отношению к базовому, унаследованному от предка).
При этом значению normal соответствует числовое значение 400, а значению bold - 700. Давайте зададим это свойство нашему второму параграфу:
p#sn, p#so, p#si{
font-family: Verdana, sans-serif;
}
p#so{
font-weight:bold;
}
Теперь наша страница выглядет так:
Font-size
Это свойство задает размер шрифта. Задавать размер в css можно тремя способами:
С помощью относительных единиц задаются размеры относительно элемента-предка.
Задавать размер с помощью единиц измерения кажется наиболее удачным, по крайней мере, на сегодняшний день. Здесь следует сказать несколько слов о единицах измерения.
Существует три относительных единицы измерения:
У наших пользователей разные диагонали мониторов и разные разрешения экранов, и мы не знаем какие они. И то, что будет смотреться хорошо на одном экране, будет совершенно нечитабельным на другом.
Поэтому для web-страниц лучше использовать только три единицы измерения: pt - для "фиксированного" дизайна сайта, % - для "резинового" дизайна и em - для пропорционального изменения размера.
Давайте зададим для наших параграфов размер в 12 пикселов, для второго параграфа увеличим его на 20%, а для третьего - уменьшим на 10% от базового (т.е. от 12 пикселов):
p#sn, p#so, p#si{
font-family: Verdana, sans-serif;
font-size:12px;
}
p#so{
font-size:1.2em;
}
p#si{
font-size:0.8em;
}
Обратите внимание, у величины em в качестве разделителя выступает точка (.), а не запятая.
Теперь наша страница выглядит так:
Сокращенная запись свойства font
В этом случае значения всех свойств перечисляются через пробел в следующем порядке: font-style, font-variant, font-weight, font-size, font-family. Причем, любое из свойств, кроме font-size и font-family, можно не указывать. Давайте зададим нашим параграфам следующие свойства:
p#sn, p#so, p#si{
font:italic 12px Verdana, sans-serif;
}
p#so{
font-size:1.2em;
}
p#si{
font-style:normal;
}
Таким образом, сначала сокращенной записью мы задали значения свойства font для всех параграфов, а затем задали отличия для
второго и третьего параграфов. Теперь наша страница выглядит так:
Вот мы и рассмотрели все свойства шрифтов. Помните, что их можно применять ко всем элементам. Наш урок подошел к концу. В следующий раз будем изучать возможности управления текстом в CSS. А пока потренируйтесь, задавая свойства background, color и font, различным элементам.
Предыдущий урок Вернуться в раздел Следующий урок
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Как сделать сайт → Уроки CSS → Урок 6. Свойства - шрифты
CSS - Урок 6. Свойства - шрифты
Для задания параметров шрифтов в CSS используется свойство font.Font-family
Это свойство css задает гарнитуру шрифта. Все шрифты можно условно разделить на несколько групп:
- Serif - шрифты с засечками, например, Times New Roman.
- Sans-serif - шрифты рубленные, без засечек, например, Arial.
- Monospace - моноширинные шрифты, например, Courier New.
- Cursive - курсивные шрифты, например, Calisto MT.
- Fantasy - декоративные шрифты, например, Torhok.
Так вот в качестве значения свойства font-family можно указать шрифт и группу шрифтов. Например:
Вообще, можно указать несколько шрифтов через запятую, в порядке убывания приоритета.
Font-style
Это свойство css задает стиль шрифта: normal (обычный), oblique (наклонный), italic (курсивный). Пусть у нас есть html-страница с тремя параграфами, зададим каждому уникальный идентификатор:
Теперь давайте зададим каждому параграфу свой стиль:
Вы спросите, чем отличается наклонный стиль от курсивного? Дело в том, что различные шрифты включают в себя различные варианты начертания (bold, italic, regular и другие). Но, если в какой-либо шрифт не включен вариант italic, то он имитируется простым наклоном букв, что и соответствует значению oblique.
По умолчанию используется стиль normal.
Font-variant
Это свойство css задает вариант написания букв из двух возможных: normal (обычный) и small-caps (малые прописные буквы). По умолчанию это свойство имеет значение normal. Давайте изменим таблицу стилей предыдущего примера на такую:
Font-weight
Это свойство css задает толщину букв шрифта. В качестве значений выступают числа: 100, 200, 300, 400, 500, 600, 700, 800 и 900. А также ключевые слова: normal (нормальный), bold (полужирный), bolder (более жирный по отношению к базовому, унаследованному от предка) и lighter (менее жирный по отношению к базовому, унаследованному от предка).
При этом значению normal соответствует числовое значение 400, а значению bold - 700. Давайте зададим это свойство нашему второму параграфу:
Font-size
Это свойство задает размер шрифта. Задавать размер в css можно тремя способами:
- с помощью ключевых слов (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, large),
- с помощью относительных единиц (% и em),
- с помощью единиц измерения длины (пикселы, пункты, сантиметры и миллиметры).
С помощью относительных единиц задаются размеры относительно элемента-предка.
Задавать размер с помощью единиц измерения кажется наиболее удачным, по крайней мере, на сегодняшний день. Здесь следует сказать несколько слов о единицах измерения.
Существует три относительных единицы измерения:
- px - равен одной точке на экране, называемой пикселом.
- em - равен высоте шрифта, используемого в данном элементе.
- ex - равен высоте строчной буквы "х" шрифта, используемого в данном элементе.
- in - равен 1 дюйму (2,54 см).
- pt - равен 1/72 дюйма.
- pc - равен 1/6 дюйма.
- mm - равен 1 миллиметру.
- sm - равен 1 сантиметру.
У наших пользователей разные диагонали мониторов и разные разрешения экранов, и мы не знаем какие они. И то, что будет смотреться хорошо на одном экране, будет совершенно нечитабельным на другом.
Поэтому для web-страниц лучше использовать только три единицы измерения: pt - для "фиксированного" дизайна сайта, % - для "резинового" дизайна и em - для пропорционального изменения размера.
Давайте зададим для наших параграфов размер в 12 пикселов, для второго параграфа увеличим его на 20%, а для третьего - уменьшим на 10% от базового (т.е. от 12 пикселов):
Сокращенная запись свойства font
В этом случае значения всех свойств перечисляются через пробел в следующем порядке: font-style, font-variant, font-weight, font-size, font-family. Причем, любое из свойств, кроме font-size и font-family, можно не указывать. Давайте зададим нашим параграфам следующие свойства:
Вот мы и рассмотрели все свойства шрифтов. Помните, что их можно применять ко всем элементам. Наш урок подошел к концу. В следующий раз будем изучать возможности управления текстом в CSS. А пока потренируйтесь, задавая свойства background, color и font, различным элементам.
Предыдущий урок Вернуться в раздел Следующий урок
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.