Параметры шрифтов в CSS определяют шрифт текста.
Примеры:
- Этот пример показывает, как задать шрифт текста.
<html>
<head>
<style type="text/css">
h1 {font-family: courier}
h2.font {font-family: sans-serif}
pre {font-family: times}
</style>
</head>
<body>
<pre>применяется шрифт "times"</pre>
<h1>заголовок h1</h1>
<h2 class="font">заголовок h2</h2>
</body>
</html>
- Этот пример показывает, как задать размер шрифта.
<html>
<head>
</head>
<body>
<ol style="font-size: 200%">
<li>first</li>
<li>second</li>
</ol>
<p style="font-size: 80%">текст параграфа</p>
<ul style="font-size: 60%">
<li>first</li>
<li>second</li>
</ul>
</body>
</html>
- Этот пример показывает, как задать стиль шрифта.
<html>
<head>
<style type="text/css">
ol {font-style: normal}
ul {font-style: oblique}
p {font-style: italic}
</style>
</head>
<body>
<p>Текст параграфа. Текст параграфа. Текст параграфа.</p>
<ol>
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ol>
<ul>
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ul>
</body>
</html>
- Этот пример показывает, как задать вариант шрифта.
<html>
<head>
</head>
<body>
<h1 style="font-variant: small-caps">Заголовок h1</h1>
<h2 style="font-variant: small-caps">Заголовок h2</h2>
</body>
</html>
- Этот пример показывает, как задать степень жирности шрифта.
<html>
<head>
<style type="text/css">
h1.first {font-weight: 800}
h2.second {font-weight: bold}
h3.third {font-weight: 900}
</style>
</head>
<body>
<h1 class="first">заголовок h1</h1>
<h2 class="second">заголовок h2</h2>
<h3 class="third">заголовок h3</h3>
</body>
</html>
- Этот пример показывает, как использовать сокращенную запись для задания всех свойств шрифта в одном объявлении.
<html>
<head>
<style type="text/css">
p
{
font: oblique small-caps bold -5px serif
}
</style>
</head>
<body>
<p>параграф параграф параграф параграф параграф параграф</p>
</body>
</html>
Параметры шрифта в CSS
Параметры шрифта в CSS позволяют изменить семейство шрифта, степень жирности, размер, и стиль текста. Обратите внимание на то, что в CSS1 шрифты идентифицируются названием шрифта. В случае, если браузер не поддерживает данный шрифт, будет использоваться шрифт по умолчанию.
Данные параметры поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.
| Параметр |
Описание |
Значения |
IE |
F |
N |
W3C |
| font |
Параметр для задания всех свойств шрифта в одном объявлении |
font-style |
4 |
1 |
4 |
1 |
| font-variant |
| font-weight |
| font-size/line-height |
| font-family |
| caption |
| icon |
| menu |
| message-box |
| small-caption |
| status-bar |
| font-family |
Определяет для элемента список имен семейств шрифтов и/или имен порождающих семейств в порядке их приоритета |
family-name |
3 |
1 |
4 |
1 |
| generic-family |
| font-size |
Задает размер шрифта |
xx-small |
3 |
1 |
4 |
1 |
| x-small |
| small |
| medium |
| large |
| x-large |
| xx-large |
| smaller |
| larger |
| length |
| % |
| font-size-adjust |
Определяет значение аспекта для элемента, которое будет сохранять x-height выбранного шрифта |
none |
- |
- |
- |
2 |
| number |
| font-stretch |
Делает текущее семейство шрифтов более узким или более широким |
normal |
- |
- |
- |
2 |
| wider |
| narrower |
| ultra-condensed |
| extra-condensed |
| condensed |
| semi-condensed |
| semi-expanded |
| expanded |
| extra-expanded |
| ultra-expanded |
| font-style |
Задает стиль шрифта |
normal |
4 |
1 |
4 |
1 |
| italic |
| oblique |
| font-variant |
Выводит текст малыми прописными буквами или обычным текстом |
normal |
4 |
1 |
6 |
1 |
| small-caps |
| font-weight |
Задает степень жирности шрифта |
normal |
4 |
1 |
4 |
1 |
| bold |
| bolder |
| lighter |
| 100 |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
Шрифты в CSS: подробное рассмотрение
Параметр 'font'
Параметр font предназначен для сокращенной записи, позволяющей задать все свойства шрифта в одном объявлении (за исключением некоторых системных шрифтов).
Наследование: да.
Может принимать следующие значения:
| Значение |
Описание |
| font-style |
Задает свойства шрифта. Значение line-height задает расстояние между строками. Это значение может быть числом, % или размером шрифта |
| font-variant |
| font-weight |
| font-size* /line-height |
| font-family |
| Caption |
Определяет шрифт для элементов управления с заголовком (таких, как кнопки, раскрывающиеся меню и т.д.) |
| icon |
Определяет шрифты, которые используются метками пиктограмм приложений |
| menu |
Определяет шрифты, которые используются для раскрывающихся меню. |
| message-box |
Определяет шрифты, которые используются в диалоговых окнах. |
| small-caption |
|
| status-bar |
Определяет шрифты, которые используются в строке состояния окна |
(*это свойство имеет также шестое значение: "line-height", которое задает расстояние между строками)
Примеры:
pre
{
font: oblique arial
}
h1
{
font: italic 200 arial
}
p
{
font: italic small-caps 10px/12px serif
}
p
{
font: status-bar
}
Параметр 'font-family'
Данное свойство определяет для элемента список имен семейств шрифтов и/или имен порождающих семейств в порядке их приоритета. Если специфицировано несколько значений, то браузер будет использовать первое распознанное значение.
Существует два типа значений font-family:
- family-name: имя семейства шрифтов ("times", "courier", "arial", и т.д.);
- generic-family: имя порождающего семейства, ("serif", "sans-serif", "cursive", "fantasy", "monospace").
В качестве разделителя используется запятая. Для последнего варианта желательно определять имя порождающего семейства. Если же имя семейства содержит пробел, то его необходимо поместить в кавычки. При использовании в HTML атрибута "style" применяются одиночные кавычки.
Наследование: да.
Может принимать следующие значения:
| Значение |
Описание |
| family-name |
Определяет для элемента имен семейств шрифтов и/или имен |
| generic-family |
порождающих семейств в порядке их приоритета. |
Примеры:
h1
{
font-family: Garamond, serif
}
<p style="font-family: Courier, Prestige, sans-serif">
Параметр 'font-size'
Параметр задает размер шрифта.
Наследование: да.
Может принимать следующие значения:
| Значение |
Описание |
| xx-small |
Задает размер шрифта от xx-small до xx-large |
| x-small |
| small |
| medium |
| large |
| x-large |
| xx-large |
| smaller |
Задает размер шрифта меньше, чем у порождающего элемента |
| larger |
Задает размер шрифта больше, чем у порождающего элемента |
| length |
Задает фиксированный размер шрифта |
| % |
Задает размер шрифта в % от порождающего элемента |
Примеры:
p
{
font-size: small
}
pre
{
font-size: 5pt
}
i
{
font-size: 3em
}
p
{
font-size: 120%
}
Параметр 'font-size-adjust'
Отношение между высотой буквы "x" нижнего регистра в шрифте и высотой "font-size" называется значением аспекта шрифта. Если значение аспекта большое, то шрифт будет легче читаться, когда его размер уменьшается. Например, Verdana имеет значение аспекта, равное 0.58, т.е. если размер шрифта равен 100px, то высота буквы x нижнего регистра будет равна 58px. Times New Roman имеет значение аспекта 0.46. Таким образом, чем больше значение аспекта шрифта, тем легче он читается при уменьшении. В данном случае шрифт Verdana при уменьшении будет читаться лучше, чем Times New Roman.
Свойство font-size-adjust определяет значение аспекта для элемента, которое будет сохранять высоту буквы x нижнего регистра выбранного шрифта.
Наследование: да.
Возможные значения:
| Значение |
Описание |
| none |
Не сохранять высоту буквы x шрифта, если шрифт недоступен |
| number |
Определяет значение аспекта для шрифта
Используемая формула:
размер выбранного шрифта * (font-size-adjust/значение аспекта доступного шрифта) = размер шрифта для доступного шрифта
Пример:
Если 14px Verdana (значение аспекта 0.58) недоступен, а доступный шрифт имеет значение аспекта 0.46, то размер шрифт для подстановки будет 14 * (0.58/0.46) = 17.65px.
|
Пример:
p
{
font-size-adjust: none
}
p
{
font-size-adjust: 0.50
}
Параметр 'font-stretch'
Данный параметр сжимает или расширяет текущее семейство шрифтов.
Необходимо отметить, что семейство шрифтов сжимается или расширяется только горизонтально.
Наследование: да.
Возможные значения:
| Значение |
Описание |
| normal |
Задает масштаб сжатия или расширения как обычный |
| wider |
Задает масштаб расширения как следующее расширенное значение |
| narrower |
Задает масштаб сжатия как следующее сжатое значение |
| ultra-condensed |
Задает масштаб сжатия или расширения семейства шрифтов. "ultra-condensed" является самым сжатым значением, а " ultra-expanded" — самым широким |
| extra-condensed |
| condensed |
| semi-condensed |
| semi-expanded |
| expanded |
| extra-expanded |
| ultra-expanded |
Пример:
colspan="2"
p
{
font-stretch: extra-expanded
}
Параметр 'font-style'
Данный параметр задает стиль шрифта.
Наследование: да.
Возможные значения:
| Значение |
Описание |
| normal |
Браузер выводит обычный шрифт |
| italic |
Браузер выводит шрифт курсивом |
| oblique |
Браузер выводит наклонный шрифт |
Пример:
p
{
font-style: oblique
}
h1
{
font-style: italic
}
Параметр 'font-variant'
Этот параметр используется для вывода текста капителью: все символы нижнего регистра преобразуются в символы верхнего регистра, при этом все символы шрифта капители имеют меньший размер по сравнению с остальным текстом.
Наследование: да.
Может принимать следующие значения:
| Значение |
Описание |
| normal |
Браузер выводит обычный шрифт |
| small-caps |
Браузер выводит шрифт капитель |
Пример:
pre
{
font-variant: small-caps
}
p
{
font-variant: normal
}
Параметр 'font-weight'
Данный параметр определяет степень жирности символов в тексте при выводе.
Наследование: да.
Возможные значения:
| Значение |
Описание |
| normal |
Определяет обычные символы |
| bold |
Определяет жирные символы |
| bolder |
Определяет более жирные символы |
| lighter |
Определяет более тонкие символы |
| 100 |
Определяет степень жирности символов. 400 соответствует normal, 700 соответствует bold |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
Пример:
h1
{
font-weight: 200
}
h2
{
font-weight: bold
}
|
Посмотреть
порно видео в онлайне »