Руководство пользователя Отмена

Селекторы CSS

Поиск

Последнее обновление 21 мая 2021 г.

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

Использование имен семейств шрифтов в CSS

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

Использование имени семейства шрифтов в CSS

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

h1 {
  font-family: "brandon-grotesque", sans-serif;
}

Указание резервных шрифтов

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

Стек шрифтов должен содержать по крайней мере один резервный шрифт, который одинаково доступен на всех платформах (например, Georgia или Arial), за которым следует общее имя семейства шрифтов (например, serif или sans-serif). Если браузер не может найти первый шрифт, он попробует второй шрифт и так далее.

Использование нескольких значений насыщенности и стилей

Вы можете указать насыщенность шрифта, отличную от значений «нормальный» и «жирный», используя числовые значения толщины шрифта в CSS. Числовые значения чаще всего соответствуют таким значениям толщины:

100 = тонкий
200 = сверхсветлый
300 = светлый
400 = нормальный, книжный
500 = средний
600 = полужирный
700 = жирный
800 = плотный
900 = черный

Числовые значения для всех шрифтов в вашем проекте указаны на странице веб-проектов.

Например, используйте этот CSS, чтобы применить насыщенность шрифта 700 к элементу h1:

h1 {
  font-weight: 700;
}

Использование вариативных имен в Internet Explorer 8

Internet Explorer 8 загружает максимум четыре значения насыщенности на семейство, а использование двух расположенных рядом значений насыщенности (например, 600 и 700) может привести к правильной загрузке только одного значения насыщенности. Adobe Fonts использует вариативные имена семейств шрифтов для таких версий браузера, чтобы устранить обе эти ошибки.

При необходимости название варианта должно быть добавлено в начале стека font-family перед основным именем семейства:

#post-title {
  font-family: "brandon-grotesque-n7","brandon-grotesque", sans-serif;
  font-style: normal;
  font-weight: 700;
}

Имена состоят из обычного названия семейства шрифтов, за которым следует тире, затем описание варианта шрифта (или FVD). Например, вариативное имя для brandon-grotesque, который содержит шрифт насыщенностью 700, будет иметь вид brandon-grotesque-n7.

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

Большинству пользователей не нужно использовать эти дополнительные имена семейств шрифтов. Вам нужно будет добавить их только в том случае, если вы заметите проблемы с правильным отображением шрифтов, например в Internet Explorer 8.