Содержание

Свойство font-family, семейство шрифта — Оформление текста — HTML Academy

Загрузка…
Через несколько секунд всё будет готово

  • index.html
  • style.css

HTML

<!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»utf-8″> <title>Сайт начинающего верстальщика</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <header> <h2>Сайт начинающего верстальщика</h2> </header> <main> <img src=»img/raccoon.svg» alt=»Аватарка»> <nav> <h3>Записи в блоге</h3> <ul> <li><a href=»day-1.html»>День первый. Как я забыл покормить кота</a></li> <li><a href=»day-2.html»>День второй. Хочу быть верстальщиком</a></li> <li><a href=»day-3. html»>День третий. Мой кот на меня обиделся</a></li> <li><a href=»day-4.html»>День четвёртый. Как я чуть не заболел</a></li> <li><a href=»day-5.html»>День пятый. Отдыхаю</a></li> <li><a href=»day-6.html»>День шестой. Как я ничего не понял, продолжение</a></li> <li><a href=»day-7.html»>День седьмой. Кекс выдал мне задание</a></li> <li><a href=»day-8.html»>День восьмой. Очень серьёзный</a></li> <li><a href=»day-9.html»>День девятый. Точнее ночь</a></li> <li><a href=»day-10.html»>День десятый. Подведение итогов</a></li> <li><a href=»day-11.html»>День одиннадцатый. Без фанатизма</a></li> <li><a href=»day-12.html»>День двенадцатый. Все любят печенье</a></li> <li><a href=»day-13.

html»>День тринадцатый. Нашёл статью</a></li> <li><a href=»day-14.html»>День четырнадцатый. Новый формат</a></li> <li><a href=»day-15.html»>День пятнадцатый. Галерея селфи</a></li> </ul> </nav> <section> <p>Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл <a href=»https://htmlacademy.ru/courses»>тренажёры по HTML и CSS</a> и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.</p> <p>Моё первое задание — вести дневник и честно писать обо всех своих свершениях.</p> </section> <section> <h3>Навыки</h3> <dl> <dt>HTML</dt> <dd><div>60%</div></dd> <dt>CSS</dt> <dd><div>20%</div></dd> <dt>JS</dt> <dd><div>10%</div></dd> </dl> </section> </main> <footer> Подвал сайта </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: «Arial», sans-serif; color: #222222; background: #ffffff url(«img/bg-page. png») no-repeat top center; } h2 { font-size: 24px; line-height: normal; } h3 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .page-title { font-size: 36px; line-height: 42px; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; color: #ffffff; background-color: #4470c4; border: 5px solid #2d508f; } .blog-navigation h3 { margin-top: 0; } .blog-navigation ul { padding-left: 0; list-style: none; } .blog-navigation li { margin-bottom: 5px; } .blog-navigation a { color: #ffffff; } .skills dd { margin: 0; margin-bottom: 10px; background-color: #e8e8e8; } .skills-level { font-size: 12px; text-align: center; color: #ffffff; background-color: #4470c4; } .skills-level-ok { background-color: #47bb52; } footer { margin-top: 30px; }

Что в задании вам не понравилось?

Не работает проверка кодаЗадание слишком сложноеНепонятная теорияДругое (сейчас напишу)

Другое (сейчас напишу)

Спасибо! Мы скоро всё исправим)

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

ЗадачиВыполнено

  1. Для класса .page-title задайте шрифтовое семейство font-family со значением serif,
  2. затем смените его на 
    sans-serif
  3. а потом на "Verdana", sans-serif.

CSS/Свойство font-family

Синтаксис

CSS 1

CSS 2‒2.2

CSS 3

font-family: [[<название-семейства> | <общее-семейство>] [, [ <название-семейства> | <общее-семейство> ] ]* ] | inherit;

Описание

Свойство font-family указывает семейство шрифтов применяемое для отображения текста элемента. При этом в качестве одного пункта из списка значений может быть указано как какое-либо определённое семейство шрифтов, так и общее семейство шрифтов.

Применяется: ко всем элементам;
Наследование: отсутствует;
Проценты: не используются;
Медиа: визуальные.

В CSS шрифты разбиваются на 5 общих семейств шрифтов:

  • Общее семейство serif. Глифы шрифтов имеют засечки и, как правило, определённый интервал. Serif шрифты представляют собой «официальный» стиль текста и часто используются в официальных документах. Примеры семейств шрифтов: «Constantia», «Times New Roman», «Liberation Serif», «Droid Serif», «Century Schoolbook L», «FreeSerif», «Linux Libertine G», «Nimbus Roman No9 L». Символы с засечками и без
  • Общее семейство sans-serif. Глифы шрифтов имеют низкую контрастность и простые штриховые окончания. Как правило, имеют определённый интервал. Примеры семейств шрифтов: «Droid Sans», «FreeSans», «Nimbus Sans L».
  • Общее семейство cursive. Используется более неформальный стиль письменности. Текст выводимый с помощью таких шрифтов больше похож на надпись сделанную ручкой или кистью.
    Примеры семейств шрифтов: «Antonella script», «Monplesir script», «Rigoletto», «Alexandra Script», «Bickham Script Two», «Burlak», «Liana», «Aquarelle».
  • Общее семейство fantasy. Включает в себя декоративные или выразительные шрифты, которые содержат выразительные или экспрессивные символы. (Они не включают в себя Pi или Picture шрифты, которые не имеют реальных символов.) Примеры семейств шрифтов: «Aurora», «CRYSIS», «Impact», «Masquerade», «Arnold BocklinC», «Benny Blanco», «elektrodisiac», «Epilog», «Crystal», «Wenatchee», «Young Love ES», «NERVOUS».
  • Общее семейство monospace. Включает в себя шрифты с фиксированной шириной символов. Моноширинные шрифты часто используются для отображения образцов компьютерного кода. Примеры семейств шрифтов: «Liberation Mono», «FreeMono», «Nimbus Mono L», «Andale Mono», «Hack».
Отображение текста общими семействами шрифтов

Одновременно через запятую можно указать сразу несколько различных семейств шрифтов (общих семейств шрифтов) [font-family: "Times New Roman", "Liberation Serif";]. При этом, если браузер не может применить первое семейство шрифтов, то предпринимаются попытки применить следующее семейство шрифтов, указанное в данном свойстве.

Примечание

Для обеспечения более надёжного исполнения замысла, авторам рекомендуется так же указывать общее семейство шрифтов [font-family: "Times New Roman", "Liberation Serif", serif;].

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

Условия использования

Если в названии семейства шрифтов присутствуют пробелы, то название такого семейства должно быть заключено в кавычки. При этом рекомендуется

заключать в кавычки все названия семейств шрифтов.

JavaScript

[объект].style. fontFamily="[значение]";


Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.


Спецификация

CSS Раздел
1 5.2.2 ‘font-family’ Перевод
2 15.2.2 Font family: the ‘font-family’ property
2.1 15.3 Font family: the ‘font-family’ property Перевод
2.2 15.3 Font family: the ‘font-family’ property
3 3. 1 Font family: the font-family property Перевод


Значения

<общее-семейство>
Указывает общее семейство шрифтов.

font-family: "Hack", "Liberation Mono", monospace;

<название-семейства>
Указывает название семейства шрифтов.

font-family: "Hack", "Liberation Mono", monospace;

inherit
Указывает, что элемент должен унаследовать параметры родительского элемента.

font-family: inherit;

Начальное значение: Зависит от агента пользователя.


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

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Свойство font-family</title>
<style type=»text/css»>
. fFamily1 { font-family: «Times New Roman», «Liberation Serif», serif; }
.fFamily2 { font-family: cursive; }
</style>
</head>
<body>
<h2>Шрифт текста</h2>
<p><span>Жизнь надо прожить так, чтобы на небесах сказали «Повтори»</span>. <span>Или в аду «Добро пожаловать, наш Господин»</span>.</p>
</body>
</html>

Свойство font-family

CSS: шрифты

CSS: шрифты

Языки

Это перевод. Здесь могут содержаться ошибки или страница может быть устаревшей по отношению к Английской версии. Переводчик: Евгений (neighbor report)

Смотрите также указатель всех приёмов работы.

На этой странице:

  • Семейства шрифтов
  • Стили шрифта

Семейства шрифтов

После цвета шрифт — возможно, важнейшее свойство страницы. На этой странице я не буду демонстрировать никаких «трюков», но покажу ряд вариаций шрифтов, допустимых в CSS.

Поскольку не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и большинство из них не бесплатны), CSS предусматривает резервную систему. Первым вы указываете шрифт, который хотели бы использовать. Затем следуют любые шрифты, которые вы могли бы использовать, если первый указанный шрифт не доступен. А закончить список вы должны типовым шрифтом, который имеет 5 видов: serif, sans-serif, monospace, cursive и fantasy.

Следующая таблица показывает примеры различных шрифтов (ваш браузер может не знать их все) и вы можете увидеть, что ваш браузер делает с каждым из пяти типовых шрифтов:

‘sans-serif’: обычные шрифты без засечек
Arial, sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
Helvetica, sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
Verdana, sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
Trebuchet MS, sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
Gill Sans, sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
Noto Sans, sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
Arial Narrow, sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
sans-serif Съешь же ещё этих мягких французских булок да выпей чаю
‘serif’: обычные шрифты с засечками
Times, Times New Roman, serif Съешь же ещё этих мягких французских булок да выпей чаю
Georgia, serif Съешь же ещё этих мягких французских булок да выпей чаю
Palatino, URW Palladio L, serif Съешь же ещё этих мягких французских булок да выпей чаю
Bookman, URW Bookman L, serif Съешь же ещё этих мягких французских булок да выпей чаю
New Century Schoolbook, TeX Gyre Schola, serif Съешь же ещё этих мягких французских булок да выпей чаю
serif Съешь же ещё этих мягких французских булок да выпей чаю
‘monospace’: шрифты фиксированной ширины
Andale Mono, monospace Съешь же ещё этих мягких французских булок да выпей чаю
Courier New, monospace Съешь же ещё этих мягких французских булок да выпей чаю
Courier, monospace Съешь же ещё этих мягких французских булок да выпей чаю
FreeMono, monospace Съешь же ещё этих мягких французских булок да выпей чаю
DejaVu Sans Mono, monospace Съешь же ещё этих мягких французских булок да выпей чаю
monospace Съешь же ещё этих мягких французских булок да выпей чаю
‘cursive’: шрифты, имитирующие почерк
Comic Sans MS, Comic Sans, cursive Съешь же ещё этих мягких французских булок да выпей чаю
Bradley Hand, cursive Съешь же ещё этих мягких французских булок да выпей чаю
Brush Script MT, Brush Script Std, cursive Съешь же ещё этих мягких французских булок да выпей чаю
Snell Roundhand, cursive Съешь же ещё этих мягких французских булок да выпей чаю
URW Chancery L, cursive Съешь же ещё этих мягких французских булок да выпей чаю
cursive Съешь же ещё этих мягких французских булок да выпей чаю
‘fantasy’: декоративные шрифты, для названий и т. д..
Impact, fantasy Съешь же ещё этих мягких французских булок да выпей чаю
Luminari, fantasy Съешь же ещё этих мягких французских булок да выпей чаю
Marker Felt, fantasy Съешь же ещё этих мягких французских булок да выпей чаю
Trattatello, fantasy Съешь же ещё этих мягких французских булок да выпей чаю
fantasy Съешь же ещё этих мягких французских булок да выпей чаю

Стили шрифтов

Большинство шрифтов имеют разнообразные стили в пределах одного и того же шрифтового семейства. Обычно это жирный стиль (bold) или курсив (italic), часто встречается также стиль «жирный курсив» (bold italic), реже — капитель (малые прописные буквы — small-caps), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии.

В таблице ниже приведены несколько различных стилей. Многие из строк будут выглядеть одинаково, если у вас нет большой коллекции шрифтов.

правило serif sans-serif
Стили
font-style: normal Съешь же… Съешь же…
font-style: italic Съешь же… Съешь же…
font-style: oblique Съешь же… Съешь же…
Насыщенность шрифта
font-weight: 100 Съешь же… Съешь же…
font-weight: 200 Съешь же… Съешь же…
font-weight: 300 Съешь же… Съешь же…
font-weight: normal Съешь же… Съешь же…
font-weight: 500 Съешь же… Съешь же…
font-weight: 600 Съешь же… Съешь же…
font-weight: bold Съешь же… Съешь же…
font-weight: 800 Съешь же… Съешь же…
font-weight: 900 Съешь же… Съешь же…
Варианты
font-variant: normal Съешь же… Съешь же…
font-variant: small-caps Съешь же… Съешь же…
Растяжение
font-stretch: ultra-condensed Съешь же… Съешь же…
font-stretch: extra-condensed
font-stretch: condensed Съешь же… Съешь же…
font-stretch: semi-condensed Съешь же… Съешь же…
font-stretch: normal Съешь же… Съешь же…
font-stretch: semi-expanded Съешь же… Съешь же…
font-stretch: expanded Съешь же… Съешь же…
font-stretch: extra-expanded
font-stretch: ultra-expanded Съешь же… Съешь же…

Модуль «Шрифты» в CSS имеет больше свойств для указания специальных стилей (для шрифтов, которые поддерживают несколько вариантов), в частности, свойство font-variant имеет гораздо больше значений.

Bert Bos, style activity lead
Copyright © 1994–2021 W3C® Privacy policy

Created 17 Jan 2001;
Last updated Ср 06 янв 2021 05:40:49

Языки

  • Azərbaycan
  • Български
  • Deutsch
  • Ελληνικά
  • English
  • Español
  • Français
  • Hrvatski
  • Bahasa Indonesia
  • Norsk
  • Nederlands
  • Polski
  • Português brasileiro
  • Português
  • Русский
  • ไทย
  • Tagalog
  • Українська
  • Tiếng Việt
  • 简体中文
  • 繁體中文

О переводах

Свойства font-size и line-height

`;document.write(t),showTopNotification()}}
  • ARعربي
  • ENEnglish
  • ESEspañol
  • FAفارسی
  • FRFrançais
  • IDIndonesia
  • ITItaliano
  • JA日本語
  • KO한국어
  • RUРусский
  • TRTürkçe
  • UKУкраїнська
  • ZH简体中文

Мы хотим сделать этот проект с открытым исходным кодом доступным для людей во всем мире. Пожалуйста, помогите нам перевести это руководство на свой язык

КупитьEPUB/PDF

14 октября 2020 г.

Здесь мы рассмотрим, как соотносятся размеры шрифта и строки, и как их правильно задавать.

  • font-sizeразмер шрифта, в частности, определяющий высоту букв.
  • line-heightвысота строки.

Для наглядности посмотрим пример HTML, в котором шрифт и размер строки одинаковы:

<style>
body {
    font-size: 30px;
    font-family: monospace;
    line-height: 30px;
  }
</style>
<div>Ёрш р</div>
<div>Ёрш Ё</div>

Размер шрифта font-size – это абстрактное значение, которое привязано к шрифту, и даётся в типографских целях.

Обычно оно равно расстоянию от самой верхней границы букв до самой нижней, исключая «нижние хвосты» букв, таких как p, g. Как видно из примера выше, при размере строки, равном font-size, строка не будет размером точно «под букву».

В зависимости от шрифта, «хвосты» букв при этом могут вылезать, правые буквы Ё и р в примере выше пересекаются как раз поэтому.

В некоторых особо размашистых шрифтах «хвосты букв» могут быть размером с саму букву, а то и больше. Но это, всё же исключение.

Обычно размер строки делают чуть больше, чем шрифт.

По умолчанию в браузерах используется специальное значение line-height:normal.

Оно означает, что браузер может принимать решение о размере строки самостоятельно. Как правило, оно будет в диапазоне 1.1 - 1.25, но стандарт не гарантирует этого, он говорит лишь, что оно должно быть «разумным» (дословно – англ. reasonable).

Значение line-height можно указать при помощи px или em, но гораздо лучше – задать его числом.

Значение-число интерпретируется как множитель относительно размера шрифта. Например, значение с множителем line-height: 2 при font-size: 16px будет аналогично line-height: 32px (=16px*2).

Однако, между множителем и точным значением есть одна существенная разница.

  • Значение, заданное множителем, наследуется и применяется в каждом элементе относительно его размера шрифта.

    То есть, line-height: 2 означает, что высота строки будет равна удвоенному размеру шрифта, не важно какой шрифт.

  • Значение, заданное в единицах измерения, запоминается и наследуется «как есть».

    Это означает, что line-height: 32px будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.

Давайте посмотрим, как это выглядит, на примерах:

Множитель, line-height:1.25

<div>
  стандартная строка
  <div>
    шрифт в 2 раза больше<br>
    шрифт в 2 раза больше
  </div>
</div>

Конкретное значение, line-height:1.25em

<div>
  стандартная строка
  <div>
    шрифт в 2 раза больше<br>
    шрифт в 2 раза больше
  </div>
</div>

Какой вариант выглядит лучше? Наверно, первый. В нём размер строки более-менее соответствует шрифту, поскольку задан через множитель.

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

Установить font-size и line-height можно одновременно.

Соответствующий синтаксис выглядит так:

font: 20px/1.5 Arial,sans-serif;

При этом нужно обязательно указать сам шрифт, например Arial,sans-serif. Укороченный вариант font: 20px/1.5 работать не будет.

Дополнительно можно задать и свойства font-style, font-weight:

font: italic bold 20px/1.5 Arial,sans-serif;
line-height
Размер строки, обычно он больше размера шрифта. При установке множителем рассчитывается каждый раз относительно текущего шрифта, при установке в единицах измерения – фиксируется.
font-size
Размер шрифта. Если сделать блок такой же высоты, как шрифт, то хвосты букв будут вылезать из-под него.
font: 125%/1.5 FontFamily
Даёт возможность одновременно задать размер, высоту строки и, собственно, сам шрифт.

Предыдущий урокСледующий урок

Поделиться

Карта учебника

  • © 2007—2022  Илья Кантор
  • о проекте
  • связаться с нами
  • пользовательское соглашение
  • политика конфиденциальности

Правила Font (Weight, Family, Size, Style) и Line Height для оформления шрифтов в CSS

Обновлено 27 мая 2021 Просмотров: 127 854 Автор: Дмитрий Петров

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня будет очередная статья, вносящая свой вклад в составление справочника по Css.

Речь в ней пойдет уже не о селекторах, а о свойствах таблиц каскадных стилей, а именно о свойствах, которые используются для оформления шрифтов в Html коде: font-family (weight, size, style, variant) и line-height. Постараюсь при этом максимально наглядно показать их работу, рассказать о синтаксисе и способах использования.

Если вы впервые столкнулись с понятием стилевого оформления кода, то советую начать углубляться в тему с основ (что такое CSS), а дальше уже идти по порядку, формирующему очередность материалов в упомянутом выше справочнике (вплоть до этой статьи). Собственно, во всех предыдущих материалах мы лишь во всех подробностях изучили тему селекторов, а сами свойства начинаем разбирать только сейчас.


Font-family — задаем тип и гарнитуру шрифта в CSS

Нужно будет предварительно сказать, что все свойства, используемые для оформления шрифтов (Font и Line Height) в Html коде, наследуются:

Итак, с помощью font-family можно задать гарнитуру и тип шрифта, который вам требуется применить к какому-то конкретному тегу (например, к абзаца P или же заголовков). Понятно, что элемент, к которому требуется применить это свойство, вы будете задавать в Css коде с помощью селекторов (о них мы с вами уже подробно поговорили и в начале публикации приведена соответствующая ссылка).

Позволю себе напомнить вам синтаксис написания CSS правил:

Т.е. сначала пишется свойство, а через двоеточие — значение для него. Правила, прописанные для каждого селектора, отделяются друг от друга точкой с запятой (после последнего ее можно не ставить):

Теперь давайте перейдем непосредственно к синтаксису font-family, ибо тут есть небольшие нюансы. В этом CSS свойстве нужно перечислить гарнитуры шрифтов в порядке убывания их приоритета (если на компьютере пользователя не будет установлен первый, то применен будет второй из списка, ну и т.д. по списку), а в конце нужно будет дописать семейство, например, sans-serif (если ни одного из перечисленных шрифтов на компьютере пользователя не обнаружится, то будет применен один из указанного семейства).

В приведенном примере браузер сначала поищет на компьютере пользователя установленный Arial, и если его найдет, то данный Html элемент им и будет в результате отрисован. А если Arial на компьютере пользователя найден не будет? Тогда браузер поищет Geneva, а в случае неудачи — Helvetica, ибо он идет следующим по убыванию приоритета в font-family. Понятно?

Ну, а если пользователь окажется настолько экзальтированным, что ничего из перечисленного в этом свойстве на его компе найдено не будет, то данный элемент будет отрисован тем шрифтом, который у этого пользователя выбран по умолчанию для семейства sans-serif (без засечек или, по другому, рубленные). Существуют еще семейства Serif (с засечками) и monospace (моноширинные), которые вы также можете использовать в Font-family для указания типа.

Да чего я объясняю?! Ведь это все в точности повторяет задание шрифтов в теге Font через атрибут Face, который сейчас считается не рекомендуемым (не валидным) и которому на смену как раз и пришло CSS свойство Font.

Тамже вы можете более подробно почитать про то, как пользователь может назначить умолчательные фонты различных типов:

Еще, кстати, написано, что существует проблема использования на сайте абсолютно любых фонтов, ибо они должны быть обязательно установлены на компьютерах пользователей. Считается, что с большой долей вероятности на компьютере пользователя будут установлены только около десятка (Arial, Verdana, Times New Roman, Tahoma, Georgia, Trebuchet MS, Courier New, Comic Sans MS), а значит именно их вы можете без опаски использовать в правилах с Font-family.

Но довольно интересный выход из этой ситуации предложил Google (онлайн шрифты для вашего сайта). Суть состоит в том, что браузер будет искать данные красивые гарнитуры (не входящих в десятку универсальных) не на компьютере пользователя, а на серверах Гугла, которые, как вы знаете, работают очень стабильно и с высоким аптаймом.

Но вернемся к синтаксису нашего CSS свойства. Я уже упомянул, что здесь есть одна маленькая особенность. Если в названии гарнитуры (которую вы хотите использовать на сайте) имеются пробельные символы, то это название обязательно нужно будет заключить в двойные кавычки.

Названия шрифтов, не содержащие пробелов в семействе Font-family, в кавычки заключать не обязательно:

Font-size — задаем в CSS размер для шрифта

Следующее свойство Font-size служит для задания размера шрифта для какого-либо элемента в Html коде. У него есть свои особенности. Размер можно задавать как в абсолютных, так и в относительных единицах:

  1. Можно задать размер жестко, используя для этого пиксели:
    font-size:10px;
  2. Можно использовать относительные единицы em и ex. Подробнее о них вы можете прочитать по ссылке, но если говорить кратко, то «em» — это высота шрифта, заданная для данного элемента по умолчанию или унаследованная, а «ex» — это высота латинской буквы «x» в нужной вам гарнитуре.

    Но размер «Ex» для разных браузеров может отличаться по отношению к «Em», поэтому в CSS свойствах font-size гораздо чаще используют относительные единицы размера шрифта в виде «Em». Например, если для заголовка задать:

    font-size:2em;

    то этот самый заголовок будет отрисовываться фонтом в два раза большего размера, чем тот, который бы использовался для него по умолчанию (унаследовался бы от шрифта текста).

  3. Также относительные размеры в font size можно задавать и с помощью процентов, которые будут считаться от размера гарнитуры, который данный элемент получил по наследству. «Em», кстати, делает тоже самое. Один «Em» и 100% — это одно и то же:

    font-size:200%;

    Кстати, гарнитура по умолчанию определяется используемым браузеров и эту информацию всегда можно посмотреть. В Firefox, например, вам достаточно для этого выбрать из верхнего меню «Настройки» — «Настройки» — вкладка «Содержимое»:

    В приведенном примере корневой элемент (тег Html) получит в наследство от настроек браузера пользователя именно фонт такого размера и такой гарнитуры. Ну, а дальше либо все будет наследоваться от элемента к элементу в глубь Html кода (вложенными элементами), либо вы сможете задать для тега размер в абсолютных величинах.

    В любом случае вы вольны будете с помощью font-size задавать в относительных единицах уменьшение или увеличение этого унаследованного размера. То же самое можно сказать и об умолчательной гарнитуре (которая в CSS задается через font-family) — она тоже передается по наследству тегу из настроек браузера пользователя.

    Все шрифтовые правила наследуются. Т.е., если вы написали в каком-то элементе правило Font-size, то этот размер будет передаваться во все вложенные в него теги (наследоваться). Это можно перебить уже прописанным для вложенного элемента правилом «Font-size» и т. д.

  4. Можно еще в качестве значений для этого свойства использовать одно из семи обозначений: xx-small, x-small, small, medium, large, x-large или xx-large. Что это такое?

    А это полный аналог того, как мы задавали размеры в чистом Html с помощью тега Font и атрибута Size. Но только там мы использовали числа от 1 до 7, а здесь используются названия, но суть осталась прежней, и размеры, заданные таким образом и через возможности чистого html, будут коррелироваться между собой:

  5. Ну и последний способ задания относительных размеров заключается в использовании «larger» и «smaller», которые позволяют увеличивать и уменьшать размер шрифта относительно унаследованного (примерно на 17 процентов, но зависит от конкретного браузера). Этот способ тоже имеет аналог в чистом Html, т.к. ранее для этого использовались теги Small и Big.

Свойства font-weight, line-height и font-style

«Font-weight» в Css позволяет задавать нормальное (normal) или жирное (bold) начертание шрифта для того элемента, которому это свойство адресовано. Но на самом деле у него могут быть и другие значения. Их всего четыре буквенных плюс цифровая шкала:

  1. Для «font weight» можно использовать значения: normal, bold, bolder (чуть более жирный) или lighter (чуть более тонкий). Причем, реально работают во всех браузерах только значения normal (в него же будет переключать и lighter) и bold (bolder также даст просто жирное начертание).
  2. Либо цифровые значения от 100 до 900 с шагом в 100 (от сверхтонкого до сверхжирного). Т.е. по этой шкале шрифт мог использовать много начертаний разной степени жирности. Изначально значение normal соответствовало 400, а значение bold — 700.

    Но на практике пока ни один браузер для «Font-weight» этого не поддерживает в полной мере. А жаль, иногда хочется использовать чуть более жирный или чуть более тонкий фонт, чем тот, что нам могут дать значения «normal» и «bold». Увы и ах, сейчас все цифры менее 400 дадут вам в итоге нормальный, а все что больше — жирный.

Кстати, в одной из последних статей мы рассматривали такое понятие, как Css стили принятые по умолчанию, для оформления элементов в Html коде, если в файле таблиц каскадных стилей для этих элементов ничего не задано. Так вот там, например, для заголовков h2-H6 и тегов логического и физического выделения жирным (strong и B) определен стиль font weight со значением bolder:

Т.е. разработчики стандарта языка стилевой разметки предполагали, что это будет работать и полностью поддерживаться браузерами, но пока что «Font-weight: bolder» интерпретируется большинством браузеров как «bold» и не более того. По умолчанию, свойство «font weight» имеет значение «normal» (посмотреть это можно для любого свойства в спецификации в столбце «Initial value»).

Следующее правило, которое у нас стоит на очереди и которое позволяете задать оформление шрифтов для имеющихся у вас Html элементов, это «Line-height», что означает — высота линии. Смысл этого правила в том, чтобы отодвинуть строчки текста на веб-странице друг от друга по высоте, ибо слепленные друг с другом строки становятся не читаемыми. В полиграфии это называется интер-линьяж.

С помощью «Line-height» можно добавить или уменьшить пространство над и под строкой с текстом, изменяя таким образом всю высоту линии с текстом:

Расстояние от текста (его размер задается через «font-size») откладывается симметрично (вверх и вниз одновременно). По умолчанию Css свойство «line height» для всех Html элементов с текстом будет иметь значение Normal (посмотреть это можно для любого свойства в спецификации в столбце «Initial value»), которое зависит от типа используемого шрифта и вычисляется браузером автоматически.

Например, для Arial высота линии равна примерно 120%, т.е. размер по вертикали всей строки (литеры плюс свободное пространство над и под ней) будет на 120% больше высоты шрифта. А для Times New Roman значение этого свойства по умолчанию будет уже примерно 125%.

Для увеличения и уменьшения расстояния между строками текста можно использовать относительные значения для «Line-height» в виде процентов или «Em». Например, для сильного разрежения строк (увеличения высоты линии) можно написать:

line-height:300%;
или
line-height:3em;

А если написать так:

line-height:30%;
или
line-height:0.3em;

то высота линии станет меньше, чем высота шрифта (font-size), и строки текста попросту наедут друг на друга.

В качестве значений для «Line-height» можно также использовать и любые абсолютные значения, которые принято использовать для шрифтов в таблицах каскадных стилей — пикселы (px), дюймы (in), пункты (pt). Либо можно использовать безразмерный множитель (любое число больше нуля). Например, для задания полуторного интервала между строками можно написать так:

line-height: 1.5;

Следующее Css свойство — это «font-style», с его помощью можно задать наклонный шрифт (курсив). Для него по спецификации предусмотрено три варианта значений: normal, italic и oblique. Но на практике используются только первые два. Причем, значение «normal» является значением по умолчанию.

Когда вы задаете для какого-либо элемента Html кода значение font-style:italic, то браузер будет искать нужную гарнитуру, помеченную как «italic» (т.е. курсивное начертание). Если сами вы зайдете через панель управления на своем компьютере в «шрифты» , то увидите там, что многие из них имеют вариант с «italic» или «курсив» в названии.

Но есть шрифты (например, всем известный Tahoma), у которых разработчиками не было предусмотрено наклонного начертания. Что же сделает в этом случае браузер (если вы в font-style прописали italic)? А он будет сам пытаться наклонить буквы этого шрифта, раз об этом заблаговременно не позаботились его разработчики. Выглядеть это будет, конечно же, хуже.

Ну, а значение oblique для font-style будет вынуждать браузер всегда наклонять шрифт своими средствами, даже если для него имеется курсивное начертание. Выглядеть это будет зачастую просто ужасно, поэтому значение «oblique» практически не используется.

Ну и последнее из рассмотренных сегодня свойств таблиц каскадных стилей — font-variant, которое очень редко используется при верстке с учетом Html и CSS.

По умолчанию в шрифтах начертание строчных букв отличается от заглавных не только размером, но и внешним видом самих литер. А вот «font-variant» позволяет, не изменяя размера строчных букв, сделать их начертание точно таким же, как и начертание заглавных.

Соответственно, у этого свойства имеется всего два значения: normal (по умолчанию) и small-caps (начертание строчных будет таким же, как и у заглавных букв). Для русского языка это свойство используется крайне редко.

Font — сборные правила в языке стилей CSS

Сборное правило Font, как и другие подобные в языке CSS, позволяет указать в нем значения отдельных элементарных свойств через пробелы.

В большинстве случае порядок значений свойств в сборных правилах не важен, но вот в Font это не так. Здесь важен порядок следования значений и он должен быть именно таким, как показано на приведенном чуть выше скриншоте (кстати, скриншот сделан в snagit).

Т.е. писать нужно будет примерно так:

font: italic small-caps bold 12px/12px verdana;

Но на самом деле, в сборном CSS правиле Font обязательны только два последних значения (font-family и font-size, даже без указания через слеш значения line-height). А какие же значения тогда браузер будет использовать для не указанных в нем свойств? Ну, очевидно, что значения, принятые для них по умолчанию (посмотреть это можно для любого свойства в спецификации в столбце «Initial value»).

А знаете почему обязательно указывать в этом сборном правиле значения для «font-family» и «font-size»? Да потому, что они не имеют как таковых значений по умолчанию (ибо они берутся из настроек браузера пользователя, как мы узнали чуть выше по тексту). Поэтому, если вы не хотите переопределять гарнитуру или размер шрифта, то сборное правило Font использовать не стоит (лучше использовать отдельные).

Т.о. его в основном используют для тегов Html или Body, а для внутренних элементов, у которых гарнитура и размер фонта должны будут наследоваться, чаще всего используют отдельные Css свойства (font-weight, size, style).

Если для внутренних элементов использовать это составное правило, то придется обязательно прописывать гарнитуру и размер. А если вы потом захотите их поменять? Что, будете лазить по всем составным сборным правилам Font в коде? Это неудобно. Поэтому оно и используется в основном только для внешних контейнеров. Но это так, размышления на тему.

Чаще всего составное правило Font пишется без многих свойств, которые редко используют отличными от умолчательных:

font:bold 4em/3em arial, "comic sans ms", sans-serif;

Т.е. здесь задается жирное начертание, указывается размер, высота линии и гарнитура. Ну, или еще проще:

font: 10px arial, sans-serif;

Это минимально возможная форма написания, в которой присутствуют только обязательные свойства «font-family» и «font-size». Все остальные будут использоваться браузером со значениями принятыми по умолчанию (normal). Описанный выше синтаксис сборного правила Font взят из спецификации:

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Управляем поведением font-face в CSS

Когда вы загружаете шрифт через font-face, браузер решает что отобразить пока шрифт загружается. Браузеры ждут некоторое время, перед тем как решить что делать дальше.

Браузер Время ожидания Запасной шрифт Замена шрифта
Chrome 35+ 3 секунды + +
Opera 3 секунды + +
Firefox 3 секунды + +
Internet Explorer 0 секунд + +
Safari нет ожидания
  • Chrome и Firefox ждут 3 секунды перед тем, как отобразить текст запасным шрифтом. В дальнейшем, когда шрифт загрузится элементы использующие этот шрифт перерисуются с новым шрифтом. Возможно вы замечали как некоторые страницы “мерцали” при смене шрифта.
  • Internet Explorer не ждет трех секунд, а сразу отрисовывает текст: если браузер еще не загрузил шрифт, то используется запасной. После загрузки шрифта элементы перерисуются.
  • В Safari нет времени ожидания

Это поведения по умолчанию полезны, но отличаются от браузера к браузеру. Это не подаются никакому контролю со стороны разработчика. К тому-же эти способы не идеальны, поэтому разработчики городят решения этих проблем на JavaScript.

Временная шкала отображения шрифта

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

  • Первый период — блокировка шрифта. Если браузер во время этого периода не загрузил шрифт, то он отрисует невидимый запасной шрифт для элементов использующих загружаемый шрифт. Если браузер загрузил шрифт во время этого периода, то он перерисует элементы с загруженным шрифтом.
  • Второй период — замена шрифта. Если браузер во время этого периода не загрузил шрифт, то он отрисует запасной шрифт. Если браузер загрузил шрифт во время этого периода, то он перерисует элементы с загруженным шрифтом.
  • Третий период — период отказа. Если браузер не загрузил шрифт до этого момента, то шрифт помечается неудачно загруженным, в результате чего используется запасной шрифт.

При перерисовке запасным шрифтом браузер находит первый шрифт, объявленный в font-family, который уже готов к использованию, и отрисовать текст им.

При перерисовке невидимым запасным шрифтом для элемента, браузер ищет шрифт так же как и при “перерисовке запасным шрифтом”. Создает анонимный шрифт с похожими метриками как у выбранного шрифта, но с невидимыми символами, и отрисовывает текст им.

Контролируем отображение шрифта

Свойство font-display определяет как шрифт отобразится, в зависимости от того, когда шрифт загрузят.

Имя font-display
Для @font-face
Значения auto, block, swap, fallback, optional
По умолчанию auto
‘auto’
Использует поведение браузера по умолчанию. Обычно это поведение ‘block’.
‘block’
Устанавливает короткий период блокировки (3 секунды) и бесконечный период замены.

Если шрифт не загрузился, то браузер отрисовывает невидимый текст, но после загрузки заменяет его как можно раньше. Это поведение не подходит для иконочных шрифтов, ведь если шрифт не загрузится и пройдет 3 секунды, то пользователь увидит квадраты вместо иконок.

‘swap’
Устанавливает период блокировки в 0 секунд и бесконечный период замены.

Браузер сразу отрисовывает текст безопасным шрифтом и пользователь не видит пустого экрана дожидаясь загрузки шрифта. Но когда шрифт загрузится, он сразу заменится.

‘fallback’
Устанавливает очень короткий период блокировки (100 мс или меньше) и короткий период замены (3 секунды).

Работает так-же как и swap, но если шрифт не загрузился в течении 3-х секунд, то браузер отрисует текст запасным шрифтом. Подходит для текста предназначенного для вдумчивого чтения. В таком случае шрифт играет второстепенную роль. Если он быстро не загрузился, то не стоит отвлекать пользователя мерцанием от замены шрифта.

‘optional’
Устанавливает очень короткий период блокировки (100 мс или меньше) и период замены в 0 секунды.

Похоже на ‘fallback’, но по истечению 3-х секунд, браузер может или прервать загрузку (при медленном интернете) или понизить приоритет загрузки. Когда браузер загрузит шрифт, он все равно продолжит отображать текст запасным шрифтом, но если вы обновите текущую или перейдете на другую страницу, для которой установлено значение ‘optional’ и используется тот-же шрифт, то браузер отрисует текст загруженным шрифтом.

Видео пример работы свойства font-display

Пример работы CSS свойства font-display

Как протестировать

Свойство пока работает только в Chrome Canary. Чтобы посмотреть на его работу нужно:

  • Запустить Chrome Canary
  • Открыть флаги chrome://flags
  • Включить “enable-experimental-web-platform-features”
  • Перезапустить Canary

Когда использовать

В Canary это свойство появилось 1 декабря 2015 года, поэтому думаю что в течении 3-6 месяцев оно заработает в стабильной версии. Но уже можно добавить одну строчку CSS кода, чтобы в будущем сайт отображал шрифты выбранным вами способом. Я бы ставил по умолчанию font-display: swap.

Дополнительно

Это свойство позволит визуально ускорить отображение сайтов использующих font-face, поэтому я жду когда поддержка этого свойства появится в стабильной версии хрома. Если вы заинтересовались этой темой, то вот ссылоки для дополнительного чтения:

  • Спецификация
  • WebPageText
  • Демо

⌘ ⌘ ⌘

Еше можно подписаться на email рассылку новых заметок. Не чаще раза в неделю, без спама.

Свойство шрифта CSS

❮ Назад Полное руководство по CSS Далее ❯


Пример

Установите некоторые свойства шрифта с помощью сокращенного объявления:

в год {
шрифт: 15px Arial, без засечек;
}

п.б. {
шрифт: курсив малый полужирный 12px/30px Georgia, с засечками;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.


Определение и использование

Свойство шрифта является сокращенным свойством для:

  • стиль шрифта
  • вариант шрифта
  • вес шрифта
  • размер шрифта/высота строки
  • семейство шрифтов

Требуются значения font-size и font-family. Если одно из других значений отсутствует, используются их значения по умолчанию.

Примечание: Свойство line-height устанавливает расстояние между строками.

Показать демо ❯

Значение по умолчанию: Значение по умолчанию свойств шрифта
Унаследовано: да
Анимация: да, см. отдельные свойства . Читать про анимированный Попытайся
Версия: CSS1
Синтаксис JavaScript: объект Попытайся


Поддержка браузера

Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.

Собственность
шрифт 1,0 4,0 1,0 1,0 3,5

Примечание. См. поддержку отдельных браузеров для каждого значения ниже.



Синтаксис CSS

шрифт: стиль шрифта вариант шрифта вес шрифта размер шрифта/высота строки семейство шрифтов |заголовок|значок|меню|окно сообщения|маленький заголовок|строка состояния| первоначальный|наследовать;

Значения свойств

. . . .
Свойство/значение Описание Демо
стиль шрифта Задает стиль шрифта. Значение по умолчанию — «нормальный» Демонстрация ❯
вариант шрифта Указывает вариант шрифта. Значение по умолчанию — «нормальный» Демонстрация ❯
вес шрифта Указывает толщину шрифта. Значение по умолчанию — «нормальный» Демонстрация ❯
размер шрифта/высота строки Задает размер шрифта и высоту строки. Значение по умолчанию — «нормальный» Демонстрация ❯
семейство шрифтов Указывает семейство шрифтов. Значение по умолчанию зависит от браузера Демонстрация ❯
заголовок Использует шрифт, используемый элементами управления с заголовками (например, кнопки, выпадающие списки и т.д.)
значок Использует шрифт, используемый метками значков
меню Использует шрифты, используемые раскрывающимися меню
ящик сообщений Использует шрифты, используемые диалоговыми окнами
малый заголовок Уменьшенная версия шрифта подписи
строка состояния Использует шрифты, используемые в строке состояния
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать


Дополнительные примеры

Пример

Демонстрация некоторых других значений свойств шрифта.

Шрифт браузера, используемый в элементах управления с заголовками.


Шрифт браузера, используемый в подписях к значкам.


Шрифт браузера, используемый в раскрывающихся меню.


Шрифт браузера, используемый в диалоговых окнах.


Уменьшенная версия шрифта заголовка.


Шрифт браузера, используемый в строке состояния.

Попробуйте сами »


Связанные страницы

Учебник CSS: шрифт CSS

Ссылка HTML DOM: свойство шрифта

❮ Предыдущая Полное руководство по CSS Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру




Top Tutorials
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

902 902 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

шрифт | CSS-трюки — CSS-трюки

Свойство font в CSS — это сокращенное свойство, которое объединяет все следующие подсвойства в одном объявлении.

 корпус {
  шрифт: обычный, маленькие, обычный, 16px/1.4, Georgia;
}

/* такой же как:

тело {
  семейство шрифтов: Грузия;
  высота строки: 1,4;
  вес шрифта: нормальный;
  растяжка шрифта: нормальная;
  вариант шрифта: капитель;
  размер шрифта: 16px;
}
 */ 

Имеется семь шрифтов подсвойства, в том числе:

  • font-stretch : это свойство устанавливает ширину шрифта, например, сжатый или расширенный.
    • обычный
    • ультраконденсированный
    • сверхконденсированный
    • уплотненный
    • полуконденсированный
    • полурасширенный
    • расширенный
    • расширенный
    • сверхрасширенный
  • стиль шрифта : делает текст выделенным курсивом или наклонным.
    • обычный
    • курсив
    • косой
    • унаследовать
  • вариант шрифта : изменяет целевой текст на маленькие заглавные буквы.
    • обычный
    • мелкие капитальные
    • унаследовать
  • вес шрифта : устанавливает вес или толщину шрифта.
    • обычный
    • полужирный
    • жирнее
    • зажигалка
    • 100, 200, 300, 400, 500, 600, 700, 800, 900
    • унаследовать
  • размер шрифта : устанавливает высоту шрифта.
    • хх-маленький
    • х-маленький
    • маленький
    • средний
    • большой
    • большой
    • xx-большой
    • меньше, больше
    • процент
    • унаследовать
  • line-height : определяет количество пространства над и под встроенными элементами.
    • обычный
    • номер (множитель размера шрифта)
    • процент
  • font-family : определяет шрифт, применяемый к элементу.
    • без засечек
    • с засечками
    • моноширинный
    • курсив
    • фантастика
    • заголовок
    • значок
    • меню
    • ящик сообщений
    • малый заголовок
    • строка состояния
    • "строка"

Сокращение шрифта Gotchas

Свойство font не так прямолинейно, как другие сокращенные свойства, отчасти из-за требований к его синтаксису, а отчасти из-за проблем с наследованием.

Вот краткое изложение некоторых вещей, которые вы должны знать при использовании этого сокращенного свойства.

Обязательные значения

Два значения в сокращении font являются обязательными: font-size и font-family . Если какой-либо из них не включен, все объявление будет проигнорировано.

Кроме того, font-family должен быть объявлен последним из всех значений, иначе, опять же, все объявление будет проигнорировано.

Дополнительные значения

Все пять других значений являются необязательными. Если вы включаете любой из font-style , font-variant и font-weight , они должны стоять перед font-size в объявлении. Если это не так, они будут игнорироваться, а также могут привести к игнорированию обязательных значений.

 корпус {
    шрифт: курсив малый полужирный 44px Georgia, без засечек;
} 

В приведенном выше примере включены три опции. Пока они определены до font-size , их можно размещать в любом порядке.

Включение line-height также необязательно, но может быть объявлено только после font-size и только после косой черты:

 body {
    шрифт: 44px/20px Georgia, без засечек;
} 

В приведенном выше примере высота строки равна «20px». Если вы опустите line-height , вы также должны опустить косую черту, иначе вся строка будет проигнорирована.

Использование font-stretch

Свойство font-stretch является новым в CSS3, поэтому, если оно используется в старом браузере, который не поддерживает font-stretch в сокращении font , это вызовет всю строку игнорировать.

Спецификация рекомендует включить запасной вариант без font-stretch , например:

 body {
    шрифт: курсив малый полужирный 44px Georgia, без засечек; /* запасной вариант для старых браузеров */
    шрифт: сверхсжатый курсив, маленькие заглавные, полужирный, 44 пикселя, Georgia, без засечек;
} 
Наследование для опционалов

Если вы опустите любое из опциональных значений (включая line-height ), пропущенные опционалы не будут наследовать значения от своего родительского элемента, как это часто бывает с типографскими свойствами. Вместо этого они будут сброшены в исходное состояние.

Например:

 тело {
    шрифт: курсив малый полужирный 44px/50px Georgia, без засечек;
}

п {
    шрифт: 30px Georgia, без засечек;
} 

В этом случае необязательные значения (курсив, прописные и полужирный) помещаются на 9Объявление шрифта 0025 в элементе . Они также будут применяться к большинству дочерних элементов.

Однако, поскольку мы повторно объявили свойство шрифта для элементов абзаца, все необязательные параметры абзаца будут сброшены, в результате чего стиль, вариант, вес и высота строки вернутся к своим первоначальным значениям.

Ключевые слова для определения системных шрифтов

В дополнение к приведенному выше синтаксису свойство font также позволяет использовать ключевые слова в качестве значений. Их:

  • заголовок
  • значок
  • меню
  • ящик сообщений
  • малый заголовок
  • строка состояния

Эти значения ключевых слов задают шрифт, который используется в операционной системе пользователя для этой конкретной категории. Например, определение «заголовок» заставит шрифт этого элемента использовать тот же шрифт, который используется в операционной системе для элементов управления с заголовками (кнопок, раскрывающихся списков и т. д.).

Одно ключевое слово содержит все значение:

 body {
    шрифт: меню;
} 

Другие упомянутые ранее свойства недействительны в сочетании с этими ключевыми словами. Эти ключевые слова могут использоваться только с сокращенным шрифтом и не могут быть объявлены с использованием каких-либо отдельных свойств сокращенного написания.

Связанные свойства

  • font-stretch
  • вариант шрифта
  • стиль шрифта
  • вес шрифта
  • высота строки
  • размер шрифта
  • семейство шрифтов
  • Специальные шрифты ОС в CSS

Дополнительная информация

  • Спецификация W3C
  • Статья CSS-Tricks: px – em – % – pt – ключевое слово
  • Джонатан Снук: размер шрифта с rem
  • Учебник по свойству сокращенного шрифта CSS
  • Шпаргалка по свойствам сокращенных шрифтов CSS

Поддержка браузера

Chrome Сафари Фаерфокс Опера ИЭ Андроид iOS
Любой Любой Любой Любой Любой Любой Любой

Свойства шрифта

Свойства шрифта



  • Семейство шрифтов
  • Стиль шрифта
  • Вариант шрифта
  • Толщина шрифта
  • Размер шрифта
  • Шрифт

Синтаксис: семейство шрифтов: [[<имя семейства> | <родовое-семейство>],]* [<семейство> | <общее-семейство>]
Возможные значения: <название семейства>
  • Можно использовать любое имя семейства шрифтов
  • serif ( например , Times)
  • без засечек ( например , Arial или Helvetica)
  • курсив ( например , Zapf-Chancery)
  • фантастика ( например, , вестерн)
  • моноширинный ( например, , курьер)
Исходное значение: Определяется браузером
Применимо к: Все элементы
По наследству: Да

Семейства шрифтов могут быть назначены по определенному имени шрифта или общему семейству шрифтов. Очевидно, что определение конкретного шрифта вряд ли будет соответствовать общему семейству шрифтов. Можно выполнить несколько назначений семейства, и если выполняется конкретное назначение шрифта, за ним должно следовать общее имя семейства на случай, если первый выбор отсутствует.

Пример объявления семейства шрифтов может выглядеть следующим образом:

 P { семейство шрифтов: «Учебник нового века», Times, serif } 

Обратите внимание, что первые два задания относятся к определенным шрифтам: New Century Schoolbook и Times. Однако, поскольку оба они являются шрифтами serif , универсальное семейство шрифтов указано в качестве резервного на тот случай, если в системе нет ни одного из них, но есть другой шрифт serif , отвечающий требованиям.

Любое имя шрифта, содержащее пробелы, должно быть заключено в одинарные или двойные кавычки.

Семейство шрифтов также может быть указано вместе со шрифтом свойство.


Синтаксис: стиль шрифта: <значение>
Возможные значения: обычный | курсив | косой
Исходное значение: обычный
Применимо к: Все элементы
По наследству: Да

Свойство font-style определяет, что шрифт будет отображаться одним из трех способов: обычный , курсив или наклонный (наклонный). Пример таблицы стилей с объявлениями font-style может выглядеть следующим образом:

 h2 {стиль шрифта: наклонный}
P {стиль шрифта: обычный} 

Синтаксис: вариант шрифта: <значение>
Возможные значения: обычный | малые капиталы
Исходное значение: обычный
Применимо к: Все элементы
По наследству: Да

Свойство font-variant определяет, должен ли шрифт отображаться в обычном или маленьком заглавном . Маленькие заглавные отображаются, когда все буквы слова написаны заглавными, а прописные символы немного крупнее строчных. Более поздние версии CSS могут поддерживать дополнительные варианты, такие как сжатые, расширенные, маленькие заглавные цифры или другие пользовательские варианты. Примером назначения варианта шрифта может быть:

 SPAN {вариант шрифта: маленькие прописные} 

Синтаксис: вес шрифта: <значение>
Возможные значения: обычный | жирный | смелее | зажигалка | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Исходное значение: обычный
Применимо к: Все элементы
По наследству: Да

Свойство font-weight используется для указания веса шрифта. Значения жирнее и светлее относятся к унаследованному весу шрифта, а другие значения являются абсолютными весами шрифта.

Примечание. Поскольку не все шрифты имеют девять возможных весов отображения, некоторые веса могут быть сгруппированы вместе при назначении. Если указанный вес недоступен, альтернатива будет выбрана на следующем основании:

  • 500 можно заменить на 400 и наоборот
  • 100 300 может быть отнесен к следующему более легкому весу, если таковой имеется, или к следующему более темному весу в противном случае
  • 600 900 может быть отнесен к следующему более темному весу, если таковой имеется, или к следующему более легкому весу в противном случае

Некоторые примеры шрифтов могут быть такими:

 h2 { вес шрифта: 800 }
P {начертание шрифта: нормальный} 

Синтаксис: размер шрифта: <абсолютный размер> | <относительный размер> | <длина> | <процент>
Возможные значения:
  • <абсолютный-размер>
    • xx-маленький | х-маленький | маленький | средний | большой | х-большой | xx-large
  • <относительный размер>
    • больше | меньше
  • <длина>
  • <процент> (относительно родительского элемента)

Исходное значение: средний
Применимо к: Все элементы
По наследству: Да

Свойство font-size используется для изменения размера отображаемого шрифта. Абсолютная длина (с использованием таких единиц, как pt, и в ) следует использовать с осторожностью из-за их слабости в адаптации к различным средам просмотра. Шрифты с абсолютной длиной могут очень легко оказаться слишком маленькими или слишком большими для пользователя.

Некоторые примеры назначений размера:

 h2 {размер шрифта: большой}
P {размер шрифта: 12pt}
LI {размер шрифта: 90%}
СИЛЬНЫЙ {размер шрифта: больше} 

Авторы должны знать, что Microsoft Internet Explorer 3.x неправильно интерпретирует единицы em и ex как пиксели, что может легко сделать текст, использующий эти единицы, нечитаемым. Браузер также неправильно применяет процентные значения относительно размера шрифта по умолчанию для селектора, а не относительно размера шрифта родительского элемента. Это делает такие правила, как

 h2 { font-size: 200% } 

опасно тем, что размер будет в два раза больше размера шрифта IE по умолчанию для заголовков первого уровня, а не в два раза больше размера шрифта родительского элемента. В этом случае BODY , скорее всего, будет родительским элементом, и он, вероятно, будет определять размер шрифта medium , тогда как размер шрифта заголовка первого уровня по умолчанию, установленный IE, вероятно, будет считаться xx-large .

Учитывая эти ошибки, авторы должны соблюдать осторожность при использовании процентных значений для font-size , и, вероятно, следует избегать em и ex единиц для этого свойства.


Синтаксис: шрифт: <значение>
Возможные значения: [ <стиль шрифта> || <вариант шрифта> || <начертание> ]? [ /  ]? <семейство шрифтов>
Исходное значение: Не определено
Применимо к: Все элементы
По наследству: Да

Свойство font может использоваться как сокращение для различных свойств шрифта, а также высоты строки. Например,

 P { шрифт: жирный курсив 12pt/14pt Times, serif } 

определяет абзацы, выделенные полужирным и курсивным шрифтом Times или шрифтом с засечками размером 12 пунктов и высотой строки 14 пунктов.

Индекс CSS ~ Структура CSS ~ CSS-свойства


Дом, Форумы, Ссылка, Инструменты, Часто задаваемые вопросы, Статьи, Дизайн, Ссылки

Copyright © 1996 — 2006. Все права защищены.

Основные свойства CSS

Основные свойства CSS

Назад на страницу третьего класса »

Вот некоторые основные свойства CSS, с которыми можно работать.

  • Свойства текста
  • Список свойств
  • Свойства границы
  • Свойства шрифта

Свойства текста

осталось
Собственность Описание Значения
цвет Устанавливает цвет текста RGB, шестнадцатеричный, ключевое слово
высота строки Устанавливает расстояние между линиями нормальный, номер, длина, %
межбуквенный интервал Увеличить или уменьшить расстояние между символами нормальный, длина
выравнивание текста Выравнивает текст в элементе , Правильно, центр, оправдать
текстовое украшение Добавляет украшение к тексту нет, подчеркнуть, надчеркнуть, проходной
отступ текста Делает отступ первой строки текста в элементе длина, %
преобразование текста Управляет буквами в элементе нет, капитализировать, верхний регистр, нижний регистр

Для получения дополнительной информации посетите страницу w3schools. com в CSS Text.


Список свойств

Собственность Описание Значения
в виде списка Задает все свойства списка в одном объявлении тип-список, позиция стиля списка, изображение в стиле списка, унаследовать
изображение в стиле списка Указывает изображение в качестве маркера элемента списка URL, никто, унаследовать
позиция стиля списка Указывает, где разместить маркер элемента списка. внутри, вне, унаследовать
тип-список Указывает тип маркера элемента списка нет, диск, круг, площадь, десятичный, десятичный-ведущий-ноль,
армянский, грузинский, нижняя альфа, верхняя альфа, нижний греческий,
нижний латинский, верхняя латынь, нижний роман, верхний роман, унаследовать

Для получения дополнительной информации посетите страницу w3schools. com в списках CSS


Свойства границы

Собственность Описание Значения
граница Задает все свойства границ в одном объявлении ширина границы, бордюрный стиль, цвет границы
нижняя граница Задает все свойства нижней границы в одном объявлении ширина нижней границы, граница-нижний стиль, цвет нижней границы
цвет нижней границы Задает цвет нижней границы цвет рамки
нижняя граница Устанавливает стиль нижней границы с каймой
ширина нижней границы Устанавливает ширину нижней границы ширина границы
цвет рамки Задает цвет четырех границ имя_цвета, шестнадцатеричное_число, rgb_число, прозрачный, унаследовать
граница левая Задает все свойства левой границы в одном объявлении граница слева ширина, пограничный левый стиль, граница левого цвета
граница левого цвета Задает цвет левой границы цвет рамки
левый край Устанавливает стиль левой границы бордюрный стиль
ширина границы слева Устанавливает ширину левой границы ширина границы
граница правая Задает все свойства правой границы в одном объявлении ширина границы справа, стиль границы справа, граница правого цвета
граница правого цвета Задает цвет правой границы цвет рамки
бордюр справа Устанавливает стиль правой границы с каймой
ширина границы справа Устанавливает ширину правой границы ширина границы
с каймой Устанавливает стиль четырех границ нет, скрытый, пунктирный, пунктирная, твердый, двойной, канавка, хребет, вставка, начало, унаследовать
верхняя граница Задает все свойства верхней границы в одном объявлении ширина верхней границы, граница-верхний стиль, цвет верхней границы
цвет верхней границы Задает цвет верхней границы цвет рамки
бордюрный верх Устанавливает стиль верхней границы с каймой
ширина верхней границы Устанавливает ширину верхней границы ширина границы
ширина границы Устанавливает ширину четырех границ тонкий, средний, толстый, длина, унаследовать

Для получения дополнительной информации посетите страницу w3schools. com на CSS Borders


Свойства шрифта

Недвижимость Описание Значения
шрифт Задает все свойства шрифта в одном объявлении стиль шрифта, вариант шрифта, вес шрифта, размер шрифта/высота строки, семейство шрифтов, подпись, значок, меню, окно сообщения, маленький заголовок, статус бар, унаследовать
семейство шрифтов Указывает семейство шрифтов для текста фамилия, родовое семейство, унаследовать
размер шрифта Задает размер шрифта текста xx-маленький, х-маленький, маленький, средний, большой, х-большой, хх-большой, меньше, больше , длина, %, унаследовать
стиль шрифта Задает стиль шрифта для текста нормальный, курсив, косой, унаследовать
вариант шрифта Указывает, должен ли текст отображаться шрифтом с маленькими заглавными буквами. нормальный, маленькие заглавные буквы, унаследовать
вес шрифта Указывает толщину шрифта нормальный, смелый, смелее, зажигалка,
100, 200, 300, 400, 500, 600, 700, 800, 900, inherit
Осторожно, многие из них не поддерживаются!

Для получения дополнительной информации посетите страницу w3schools.com, посвященную шрифту CSS

.

Назад на страницу третьего класса »

Шрифт CSS Свойство

❮ Пред. Следующий ❯

Свойство font является сокращенным свойством для следующих свойств:

  • стиль шрифта
  • вариант шрифта
  • вес шрифта
  • размер шрифта
  • высота строки
  • семейство шрифтов

Вы можете установить все свойства в следующем порядке: 1. стиль шрифта, 2. вариант шрифта, 3. вес шрифта, 4. размер шрифта/высота строки, 5. семейство шрифтов. Свойство line-height используется для установки расстояния между строками.

Требуется определить значения свойств font-size и font-family. Если одно из значений отсутствует, используется его значение по умолчанию.

Все отдельные значения свойства font-size, которые не указаны, будут установлены в исходное значение.

При использовании этого сокращенного свойства вы должны знать некоторые важные вещи о нем:

Обязательные значения

Значения «font-size» и «font-family» считаются обязательными. Все объявление будет проигнорировано, если одно из этих значений отсутствует.

Дополнительные значения

Остальные пять значений являются необязательными. В случае использования одного из этих значений учтите, что они должны стоять перед значением «font-size» в объявлении, иначе они будут проигнорированы.

Свойства шрифта и font-stretch

Свойство font-stretch является новым в CSS3, и если вы используете его в старом браузере, вся строка будет проигнорирована.

Наследование необязательных значений

Если вы опустите необязательные значения, они не будут наследовать значения от своего родительского элемента. Они будут восстановлены в исходное состояние.

В качестве ключевых слов можно использовать следующие значения свойства шрифта:

  • заголовок
  • значок
  • меню
  • ящик сообщений
  • малый заголовок
  • строка состояния

Они устанавливают шрифт на тот, который используется в операционной системе пользователя для этой конкретной категории. Например, если вы укажете значение «меню», для этого элемента будет установлен шрифт для использования того же шрифта, который используется в операционной системе для раскрывающихся меню и списков меню.

Эти ключевые слова могут использоваться только со свойством сокращения шрифта.

 шрифт: стиль шрифта вариант шрифта вес шрифта размер шрифта/высота строки семейство шрифтов | подпись | значок | меню | окно сообщений | мелкий заголовок | строка состояния | начальная | наследовать; 

Пример свойства шрифта:

 

  <голова>
    Название документа
    <стиль>
      . шрифт {
        шрифт: курсив обычный полужирный 1em/140% "Lucida Grande", без засечек;
      }
    
  
  <тело>
     

Пример свойства шрифта

Это обычный абзац.

Это абзац с указанным значением шрифта.

Попробуй сам »

Результат

Пример свойства шрифта, определенного для курсивных шрифтов:

 

  <голова>
    Название документа
    <стиль>
      .шрифт1 {
        шрифт: курсив, заглавные, полужирный, 20px/1 курсив;
      }
      .шрифт2 {
        шрифт: курсив 1.2em "Fira Sans", с засечками;
      }
      .font3 {
        шрифт: 1.2em "Fira Sans", без засечек;
      }
      .font4 {
        шрифт: прописные полужирный 28px/1.5 без засечек;
      }
      .font5 {
        шрифт: подпись;
        /* шрифт: меню | значок | окно сообщений | мелкий заголовок | статус бар;*/
      }
    
  
  <тело>
     

Пример свойства шрифта

Lorem Ipsum – это просто текст-пустышка, созданный для печати и набора текста.

Lorem Ipsum – это просто текст-пустышка, созданный для печати и набора текста.

Lorem Ipsum – это просто текст-пустышка, созданный для печати и набора текста.

Lorem Ipsum – это просто текст-пустышка, созданный для печати и набора текста.

Lorem Ipsum – это просто текст-пустышка, созданный для печати и набора текста.

Попробуй сам »

Пример свойства шрифта, где размер шрифта, толщина шрифта и высота строки являются анимируемыми:

 

  <голова>
    Название документа
    <стиль>
      .элемент {
        граница: 2px сплошная #666;
        ширина: 350 пикселей;
        высота: 150 пикселей;
        шрифт: 20px "Fira Sans", без засечек;
        -webkit-анимация: элемент 4s бесконечен;
        анимация: элемент 4s бесконечен;
      }
      /* Хром, Сафари, Опера */
      Элемент @-webkit-keyframes {
        50% {
          шрифт: 50px полужирный;
        }
      }
      /* Стандартный синтаксис */
      элемент @keyframes {
        50% {
          шрифт: 50px полужирный;
        }
      }
    
  
  <тело>
     

Пример анимации шрифта

<дел>

Некоторый абзац

Попробуй сам »


Шрифты

Шрифты

предыдущий следующий содержание характеристики индекс


Содержимое

  • 15. 1 Введение
  • 15.2 Алгоритм сопоставления шрифтов
  • 15.3 Семейство шрифтов: свойство ‘font-family’
    • 15.3.1 Общие семейства шрифтов
      • 15.3.1.1 с засечками
      • 15.3.1.2 без засечек
      • 15.3.1.3 курсив
      • 15.3.1.4 фантастика
      • 15.3.1.5 моноширинный
  • 15.4 Стиль шрифта: свойство ‘font-style’
  • 15.5 Капитель: свойство «вариант шрифта»
  • 15.6 Полужирность шрифта: свойство ‘начертание шрифта’
  • 15.7 Размер шрифта: свойство ‘font-size’
  • 15.8 Свойство сокращенного шрифта: свойство ‘font’

(скрыть)

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

Поскольку не существует принятой универсальной таксономии шрифта свойства, необходимо выполнить сопоставление свойств с начертаниями шрифта осторожно. Свойства сопоставляются в четко определенном порядке, чтобы гарантировать, что результаты этого процесса сопоставления будут настолько непротиворечивыми, насколько возможно через UA (при условии, что одна и та же библиотека начертаний шрифтов представлены каждому из них).

  1. Пользовательский агент создает (или обращается) к базе данных соответствующих CSS 2.1 свойства всех шрифтов, о которых знает ПА. Если есть два шрифта с одинаковыми свойствами, пользователь Агент выбирает один из них.
  2. В данном элементе и для каждого символа в этом элементе UA собирает свойства шрифта, применимые к этому элементу. С использованием полный набор свойств, ПА использует свойство ‘font-family’ для выберите предварительное семейство шрифтов. Остальные свойства проверяются против семьи в соответствии с критериями соответствия, описанными в каждое свойство. Если есть совпадения для всех оставшихся свойств, тогда это соответствующий шрифт для данного элемента или символа.
  3. Если в «семействе шрифтов» нет соответствующего начертания шрифта, обрабатывается на шаге 2, и если есть следующая альтернатива «семейство шрифтов» в наборе шрифтов, затем повторите шаг 2 со следующей альтернативой ‘семейство шрифтов’.
  4. Если имеется совпадающий шрифт, но он не содержит глифа для текущего персонажа, и если есть следующая альтернатива ‘font-family’ в наборах шрифтов, затем повторите шаг 2 со следующим альтернативное «семейство шрифтов».
  5. Если в семействе, выбранном в пункте 2, нет шрифта, используйте Зависимое от UA семейство шрифтов по умолчанию и повторите шаг 2, используя лучший соответствие, которое можно получить в шрифте по умолчанию. Если конкретный символ не может отображаться с использованием этого шрифта, тогда ПА может использовать другой означает определение подходящего шрифта для этого символа. UA должен отображать каждый символ, для которого нет подходящего шрифта, до видимого символа выбранный ПА, предпочтительно глиф «отсутствующий символ» из одного из шрифты, доступные для UA.

(Приведенный выше алгоритм можно оптимизировать, чтобы избежать повторного посещения свойства CSS 2.1 для каждого символа.)

Правила сопоставления для каждого свойства из (2) выше следующие:

  1. Сначала пробуется ‘стиль шрифта’. «Курсив» будет удовлетворен, если в базе данных шрифтов ПА есть лицо помечены ключевым словом CSS «курсив» (предпочтительно) или «наклон». В противном случае значения должны точно совпадать, иначе стиль шрифта не удастся.
  2. Далее пробуется
  3. вариант шрифта. Матчи с маленькими заглавными буквами (1) a шрифт, помеченный как «маленькие заглавные», (2) шрифт, в котором маленькие заглавные буквы синтезированный или (3) шрифт, в котором все строчные буквы заменены на заглавные буквы. Шрифт с маленькими заглавными буквами может быть синтезирован с помощью электронное масштабирование заглавных букв из обычного шрифта. «нормальный» соответствует обычному варианту шрифта (без прописных букв). Шрифт не может не иметь нормального варианта. Шрифт который доступен только с маленькими заглавными буквами, должен быть выбран либо как «нормальный», либо с «маленькими заглавными буквами».
  4. ‘font-weight’ соответствует следующему, он будет никогда не терпит неудачу. (См. «Шрифт» ниже.)
  5. ‘font-size’ должен совпадать в UA-зависимый запас допуска. (Как правило, размеры масштабируемых шрифтов округляются до ближайшего целого пикселя, а допуск для растровые шрифты могут достигать 20%.) Дальнейшие вычисления, например, значениями ’em’ в других свойствах, основаны на вычисленное значение ‘font-size’.
‘семейство шрифтов’

Значением свойства является приоритетный список имен семейств шрифтов. и/или общие фамилии. В отличие от большинства других свойств CSS, значения компонентов разделены через запятую, чтобы указать, что они являются альтернативами:

body { семейство шрифтов: Gill, Helvetica, без засечек}
 

Хотя многие шрифты содержат глиф «отсутствующий символ», обычно открытая коробка, как следует из названия, это не должно быть считается совпадением для символов, которых нет в шрифте. (Должно, однако считается совпадением для U + FFFD, «отсутствующего символа» код символа).

Существует два типа названий семейств шрифтов:

<фамилия>
Имя выбранного семейства шрифтов. В последнем примере «Гилл» и «Helvetica» — это семейства шрифтов.
<общее-семейство>
В приведенном выше примере последнее значение — общее имя семейства. определены следующие родовые семейства:
  • ‘с засечками’ (например, Times)
  • ‘без засечек’ (например, Helvetica)
  • ‘курсив’ (например, Zapf-Chancery)
  • ‘фэнтези’ (например, вестерн)
  • «моноширинный» (например, Courier)

Разработчикам таблиц стилей рекомендуется предлагать общее семейство шрифтов как последний вариант. Общие названия семейств шрифтов являются ключевыми словами и НЕ ДОЛЖНЫ заключаться в кавычки.

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

Например, следующие объявления недействительны:

семейство шрифтов: красный/черный, без засечек;
семейство шрифтов: "Lucida" Grande, без засечек;
семейство шрифтов: гм!, без засечек;
семейство шрифтов: [email protected], без засечек;
семейство шрифтов: #POUND, без засечек;
семейство шрифтов: Hawaii 5-0, без засечек;
 

Если в качестве имени семейства шрифтов задана последовательность идентификаторов, вычисляемое значение — это имя, преобразованное в строку путем объединения всех идентификаторы в последовательности одинарными пробелами.

Во избежание ошибок при экранировании рекомендуется брать шрифт в кавычки фамилии, содержащие пробелы, цифры или знаки препинания символы кроме дефисов:

body { семейство шрифтов: "Учебник нового века", с засечками}
<ТЕЛО>
 

Семейство шрифтов имен , которые совпадают с ключевым словом значение («наследовать», «с засечками», «без засечек», «моноширинный», «фэнтези» и ‘cursive’) необходимо заключать в кавычки, чтобы избежать путаницы с ключевыми словами с одни и те же имена. Ключевые слова «начальный» и «по умолчанию» зарезервированы для использования в будущем и также должны быть заключены в кавычки при использовании в качестве имен шрифтов. UA должны не рассматривать эти ключевые слова как соответствующие ‘‘ тип.

15.3.1 Семейства универсальных шрифтов

Семейства универсальных шрифтов представляют собой резервный механизм, средство сохранение некоторых намерений автора таблицы стилей в худшем случае когда ни один из указанных шрифтов не может быть выбран. Для оптимального типографский контроль, определенные именованные шрифты должны использоваться в таблицы стилей.

Определено, что все пять универсальных семейств шрифтов существуют во всех Реализации CSS (они не обязательно должны сопоставляться с пятью различными актуальные шрифты). Пользовательские агенты должны предоставлять разумные выбор по умолчанию для общих семейств шрифтов, которые выражают характеристики каждой семьи как можно лучше в пределах разрешено базовой технологией.

Пользовательским агентам рекомендуется разрешать пользователям выбирать альтернативные выбор общих шрифтов.

15.3.1.1
шрифты с засечками

Глифы шрифтов с засечками, как этот термин используется в CSS, обычно имеют отделку штрихи, расклешенные или сужающиеся концы или имеющие настоящие окончания с засечками (в том числе с засечками). Обычно шрифты с засечками пропорционально расположенные. Они часто демонстрируют большую вариацию между толстые и тонкие штрихи, чем шрифты из общего шрифта без засечек семья. CSS использует термин «serif» для применения к шрифту для любого письма, хотя другие имена могут быть более привычными для конкретных скриптов, например как Mincho (японский), Sung или Song (китайский), Totum или Kodig (корейский). Любой описанный таким образом шрифт может использоваться для представления общее семейство засечек.

Примеры шрифтов, соответствующих этому описанию, включают:

Латинские шрифты Times New Roman, Бодони, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
Греческие шрифты Битовый поток Кибербит
Кириллические шрифты Adobe Minion Cyrillic, Excelsior Cyrillic Upright, Монотипия Альбион 70, Битстрим Кибербит, ЭР Букинист
Шрифты на иврите Новый Пениним, Раанана, Битстрим Кибербит
Японские шрифты Рюмин Лайт-КЛ, Киокасё ICA, Футо Мин A101
Арабские шрифты Битовый поток Кибербит
Шрифты Чероки Ло Цицерон Чероки
15.
3.1.2 без засечек

Глифы в шрифтах без засечек, как этот термин используется в CSS, обычно имеют обводку окончания, которые являются простыми — с небольшим расширением, поперечным штрихом или другим украшение. Шрифты без засечек обычно пропорционально расположенные. Они часто имеют небольшие различия между толстыми и тонкие штрихи по сравнению со шрифтами из семейства «serif». CSS использует термин «без засечек» применяется к шрифту для любого письма, хотя другие имена могут быть более привычными для конкретных скриптов, например Готический (японский), Кай (китайский) или Патанг (корейский). Любой шрифт, который описывается таким образом, может использоваться для представления общего шрифта без засечек. семья.

Примеры шрифтов, соответствующих этому описанию, включают:

Латинские шрифты MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
Греческие шрифты Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
Кириллические шрифты Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
Шрифты на иврите Arial Иврит, MS Tahoma
Японские шрифты Шин Го, Хэйсэй Каку Готика W5
Арабские шрифты МС Тахома
15.
3.1.3 курсив

Глифы в курсивных шрифтах, как этот термин используется в CSS, обычно имеют либо соединяющие штрихи, либо другие характеристики скорописи, выходящие за рамки этих курсивных шрифтов. Глифы частично или полностью связаны, и результат больше похож на рукописное перо или кисть письмо, чем печатное письмо. Шрифты для некоторых скриптов, таких как Арабский, почти всегда курсивом. CSS использует термин «курсив», чтобы применяются к шрифту для любого сценария, хотя другие имена, такие как Chancery, Brush, Swing и Script также используются в названиях шрифтов.

Примеры шрифтов, соответствующих этому описанию, включают:

Латинские шрифты Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Цапф-Канцелярия
Кириллические шрифты ЭР Архитектор
Шрифты на иврите Корсива
Арабские шрифты DecoType Насх, Монотипия Урду 507
15.
3.1.4 фэнтези

Фантазийные шрифты, используемые в CSS, носят преимущественно декоративный характер, а все еще содержащие представления символов (в отличие от Pi или графические шрифты, не представляющие символы). Примеры включают:

Латинские шрифты Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz
15.3.1.5
моноширинный

Единственным критерием моноширинного шрифта является то, что все глифы имеют одинаковую фиксированную ширину. (Это может сделать некоторые сценарии, такие как арабский, выглядят весьма своеобразно.) Эффект аналогичен ручному пишущая машинка и часто используется для набора образцов компьютерного кода.

Примеры шрифтов, соответствующих этому описанию, включают:

Латинские шрифты Courier, MS Courier New, Prestige, Everson Mono
Греческие шрифты MS Courier New, Everson Mono
Кириллические шрифты ER Курьер, Эверсон Моно
Японские шрифты Осака Моноширинный
Шрифты Чероки Эверсон Моно
‘стиль шрифта’

Свойство ‘font-style’ выбирает между обычным (иногда называются «римскими» или «прямыми»), курсивом и наклонными шрифтами внутри семейство шрифтов.

Значение «обычный» выбирает шрифт, который классифицируется как «обычный». в базе данных шрифтов UA, в то время как «наклонный» выбирает шрифт, который с пометкой «наклонный». Значение «курсив» выбирает шрифт, который помечен «курсив» или, если он недоступен, с пометкой «наклонный».

Шрифт, помеченный как «наклонный» в базе данных шрифтов ПА, может на самом деле были созданы путем электронного наклона обычного шрифта.

Шрифты с именами Oblique, Slanted или Incline будут обычно помечаются как «наклонные» в базе данных шрифтов ПА. Шрифты с Italic, Cursive или Kursiv в их именах будет обычно помечаются как «курсив».

h2, h3, h4 {стиль шрифта: курсив}
h2 em {стиль шрифта: обычный}
 

В приведенном выше примере выделенный текст внутри ‘h2’ будет отображаться в нормальное лицо.

‘вариант шрифта’

Другим типом вариаций в семействе шрифтов являются капители. В шрифте с маленькими заглавными буквами строчные буквы выглядят так же, как в прописные, но меньшего размера и с немного другим пропорции. Свойство font-variant выбирает этот шрифт.

Значение «нормальный» выбирает шрифт, который не является шрифтом с маленькими заглавными буквами, ‘small-caps’ выбирает шрифт с маленькими заглавными буквами. Допустимо (но не требуется) в CSS 2.1, если шрифт с маленькими заглавными буквами создается путем обычный шрифт и замена строчных букв масштабированными прописными персонажи. В крайнем случае, прописные буквы будут использоваться как замена шрифта с маленькими заглавными буквами.

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

h4 {вариант шрифта: маленькие прописные}
em {стиль шрифта: наклонный}
 

В семействе шрифтов могут быть и другие варианты, например шрифты с цифрами старого стиля, цифрами с маленькой прописной буквы, сжатыми или развернутые буквы и т. д. В CSS 2.1 нет свойств, которые их выбирают.

Примечание: , поскольку это свойство приводит к тому, что текст преобразуется в верхний регистр, применяются те же соображения, что и для ‘text-transform’.

‘шрифт’

Свойство ‘font-weight’ выбирает толщину шрифта. значения от «100» до «900» образуют упорядоченную последовательность, где каждое число указывает на вес, который, по крайней мере, такой же темный, как и его предшественник. ключевое слово «обычный» является синонимом «400», а «жирный» является синонимом с «700». Ключевые слова, отличные от «обычный» и «жирный», были показаны как часто путали с названиями шрифтов, поэтому числовая шкала была выбран для списка из 9 значений.

p { вес шрифта: обычный } /* 400 */
h2 { вес шрифта: 700 } /* полужирный */
 

Значения «жирнее» и «светлее» выбирают толщину шрифта, относительно веса, унаследованного от родителя:

сильный {начертание шрифта: жирнее}
 

Шрифты (данные шрифта) обычно имеют одно или несколько свойств, значения — это имена, описывающие «вес» шрифта. Там не является общепринятым, универсальным значением этих названий весов. Их основной роль состоит в том, чтобы различать лица разной темноты в пределах одного семейство шрифтов. Использование в семействах шрифтов весьма разнообразно; Например, шрифт, который можно считать полужирным, может быть описан как будучи Regular, Roman, Book, Medium, Semi- или DemiBold, Жирный, или Черный, в зависимости от того, насколько черным является «обычное» лицо. шрифт находится в дизайне. Потому что нет стандартного использования имен, значения свойства веса в CSS 2.1 даются в числовом шкала, в которой значение «400» (или «нормальный») соответствует «обычное» текстовое начертание для этой семьи. Название веса, связанное с это лицо обычно будет Book, Regular, Roman, Normal или иногда Средний .

Привязка других весов в семействе к числовому значения веса предназначены только для сохранения порядка темноты внутри этой семьи. Однако следующие эвристики говорят о том, как присваивание выполняется в этом случае:

  • Если семейство шрифтов уже использует числовую шкалу с девятью значениями (как, например, OpenType ), веса шрифта должны быть сопоставлены напрямую.
  • Если есть обе грани с маркировкой Medium и один помечен Book, Regular, Roman или Normal, , затем Средний обычно присваивается «500».
  • Шрифт с пометкой «Жирный» часто соответствует значению веса «700».

После того, как веса семейства шрифтов сопоставлены со шкалой CSS, недостающие веса выбираются следующим образом:

  • Если желаемый вес меньше 400, вес ниже желаемого веса проверяются в порядке убывания, за которым следуют веса выше желаемый вес в порядке возрастания, пока не будет найдено совпадение.
  • Если желаемый вес больше 500, вес выше желаемого веса проверяются в порядке возрастания, за которым следуют веса ниже желаемый вес в порядке убывания, пока не будет найдено совпадение.
  • Если желаемый вес равен 400, сначала проверяется 500, а затем используется правило для желаемых весов менее 400.
  • Если желаемый вес 500, сначала проверяется 400, а затем используется правило для желаемых весов менее 400.

В следующих двух примерах показаны типичные сопоставления.

Предположим, четыре веса в семействе «Гремучих змей», от самого легкого до самый темный: Regular, Medium, Bold, Heavy.

9008 Семейство «Ice Prawn»: Book, Medium, Bold, Heavy, Black, Экстрачерный. Обратите внимание, что в данном случае пользовательский агент решил вместо присвоить числовой значение «Ice Prawn ExtraBlack».

Первый пример отображения веса шрифта
Available faces Assignments Filling the holes
«Rattlesnake Regular» 400 100, 200, 300
«Rattlesnake Medium» 500  
«Смелая гремучая змея» 700 600
«Тяжелая гремучая змея» 800 900
Второй пример отображения веса шрифта
Доступные поверхности Assignments Filling the holes
«Ice Prawn Book» 400 100, 200, 300
«Ice Prawn Medium» 500  
«Ice Prawn Bold « 700 600
» Ice Crawn Heavy « 800
» Ледяная кревет0057
«Ice Prawn ExtraBlack» (нет)  

Значения «жирнее» и «светлее» указывают значения относительно вес родительского элемента. На основании унаследованного значения веса, используемый вес рассчитывается с использованием приведенной ниже таблицы. Дочерние элементы наследовать рассчитанный вес, а не значение «жирнее» или «светлее».

Значение слов «жирнее» и «ярче»
Унаследованное значение жирнее зажигалка
100 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700

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

Нет гарантии, что будет более темное лицо для каждого из значения «шрифта»; например, некоторые шрифты могут иметь только нормальное и жирное лицо, в то время как другие могут иметь восемь весов лица. Нет никаких гарантий того, как UA будет отображать начертания шрифтов внутри семейства. к весовым значениям. Единственная гарантия состоит в том, что лицо заданного значения будет не менее темным, чем грани более светлых значений.

‘размер шрифта’

Размер шрифта соответствует квадрату em, используемому в типографике. Обратите внимание, что некоторые глифы могут выходить за пределы своих квадратов em. Ценности имеют следующие значения:

<абсолютный размер>
Ключевое слово является индексом таблицы шрифтов. размеры вычисляются и хранятся UA. Возможные значения:

[ xx-маленький | х-маленький | маленький | средний | большой | х-большой | xx-большой ]

В следующей таблице приведены рекомендации пользовательского агента для абсолютного размера сопоставление с заголовком HTML и абсолютными размерами шрифта. «Среднее» значение предпочтительный размер шрифта пользователя и используется в качестве эталонного среднего значения.

Значения абсолютного размера CSS хх-маленький х-маленький маленький средний большой большой xx-большой  
Размер шрифта HTML 1   2 3 4 5 6 7

Разработчики должны составить таблицу коэффициентов масштабирования для ключевых слов с абсолютным размером по отношению к «среднему» размеру шрифта и конкретному устройству и его характеристикам (например, разрешению устройства).

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

Примечание 1. Для сохранения удобочитаемости UA, применяющий эти рекомендации, тем не менее, должны избегать создания размера шрифта в результате менее 9 пикселей на единицу ЭМ на дисплее компьютера.

Примечание 2. В CSS1 предлагаемый коэффициент масштабирования между соседними индексами был 1,5, что удобно для пользователей. оказался слишком большим. В CSS2 предлагаемый коэффициент масштабирования для экран компьютера между соседними индексами был 1,2, что еще создавало вопросы для малых размеров. Опыт внедрения показал что фиксированное соотношение между соседними ключевыми словами абсолютного размера составляет проблематично, и эта спецификация делает не рекомендую такой фиксированный коэффициент.

<относительный размер>
Ключевое слово интерпретируется относительно таблица размеров шрифтов и размер шрифта родительского элемента. Возможный значения: [ больше | меньше]. Например, если родительский элемент имеет размер шрифта «средний», значение «крупнее» сделает шрифт размер текущего элемента должен быть «большим». Если размер родительского элемента не находится рядом с записью в таблице, ПА может интерполировать между записей таблицы или округлить до ближайшего. UA, возможно, придется экстраполировать табличные значения, если числовое значение выходит за пределы ключевые слова.
г.

Значения длины и процента не должны принимать значения из таблицы размеров шрифта учитывать при расчете размера шрифта элемента.

Отрицательные значения не допускаются.

Во всех других свойствах значения длины ’em’ и ‘ex’ относятся к вычисленный размер шрифта текущего элемента. В свойстве ‘font-size’ эти Единицы длины относятся к вычисленному размеру шрифта родительского элемента.

Обратите внимание, что приложение может переинтерпретировать явный размер, в зависимости от контекста. Например, внутри VR-сцены шрифт может получить другой размер из-за искажения перспективы.

Примеры:

р {размер шрифта: 16px; }
@медиа печать {
p {размер шрифта: 12pt; }
}
цитата {размер шрифта: больше}
эм {размер шрифта: 150%}
эм {размер шрифта: 1,5 эм}
 
‘шрифт’

Свойство «шрифт»: за исключением описанного ниже, сокращенное свойство для параметр ‘стиль шрифта’, ‘вариант шрифта’, ‘вес шрифта’, ‘размер шрифта’, ‘высота строки’ и ‘семейство шрифтов’ в то же время место в стиле лист. Синтаксис этого свойства основан на традиционном типографская сокращенная запись для установки нескольких свойств, связанных с шрифты.

Все свойства, связанные со шрифтом, сначала сбрасываются до исходных значений, включая перечисленные в предыдущем абзаце. Затем те свойства, которым заданы явные значения в Сокращение ‘font’ устанавливается на эти значения. Для определения разрешенных и начальных значений см. ранее определенные свойства.

p { шрифт: 12px/14px без засечек }
р { шрифт: 80% без засечек }
p { шрифт: x-large/110% "Учебник нового века", с засечками}
p { шрифт: полужирный курсив большой Palatino, с засечками }
p { шрифт: обычный, маленькие, 120 %/120 %, фантазийный }
 

Во втором правиле процентное значение размера шрифта («80%») относится к к размеру шрифта родительского элемента. В третьем правиле строка Процент высоты относится к размеру шрифта самого элемента.

В первых трех приведенных выше правилах ‘стиль шрифта’, ‘вариант шрифта’ и ‘font-weight’ явно не упоминаются, что означает, что они все три установлены на свои начальные значения («нормальные»). Четвертое правило устанавливает «начертание шрифта» на «полужирный», «стиль шрифта» на «курсив» и неявно устанавливает «вариант шрифта» в «нормальный».

Пятое правило устанавливает «вариант шрифта» («маленькие заглавные»), «размер шрифта» (120% шрифта родителя), «высота строки» (120% раз размер шрифта) и «семейство шрифтов» («фантазия»). Отсюда следует, что ключевое слово «нормальный» применяется к двум оставшимся свойствам: «стиль шрифта» и «шрифт».

Следующие значения относятся к системным шрифтам:

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

Системные шрифты можно устанавливать только целиком; то есть шрифт семейство, размер, вес, стиль и т. д. устанавливаются одновременно. Затем эти значения могут быть изменены индивидуально, если это необходимо.