Основы работы с CSS

Шрифты в CSS

Разбить на страницы
Показывать лекцию целиком

Параметры шрифтов в 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
}
    Страницы:

    Параметры шрифтов в 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
}
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^