CSS Fonts
CSS Fonts - модуль в CSS, который определяет свойства связанные со шрифтами и как шрифтовые ресурсы загружаются. Модуль позволяет вам задать стиль шрифта, вроде font-family, font-size и font-weight, lineheight и варианты отображения знаков, когда для одного доступны сразу несколько
Базовый пример
Следующий пример показывает простое использование шрифтовых свойств, стилизующих тэг <p>.
p {
width: 600px;
margin: 0 auto;
font-family: "Helvetica Neue", "Arial", sans-serif;
font-style: italic;
font-weight: 100;
font-variant-ligatures: normal;
font-size: 2rem;
letter-spacing: 1px;
}
<p>
Three hundred years ago<br />
I thought I might get some sleep<br />
I stretched myself out onna antique bed<br />
An' my spirit did a midnite creep
</p>
Вывод на экран будет следующим:
Различные примеры шрифтов
Вы можете найти множество вариантов шрифтов на v-fonts.com и axis-praxis.org; так же смотрите наше руководство Variable fonts для большей информации по использованию.
Отсылки
Свойства
font
font-family
font-feature-settings
font-kerning
font-language-override
font-optical-sizing
font-size
font-size-adjust
font-stretch
font-style
font-synthesis
font-variant
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric
font-variant-position
font-variation-settings
font-weight
line-height
@-правила
Руководство
- Fundamental text and font styling
-
В этой обучающей статье для новичков мы детально описываем основы стилизации текста/шрифта, включая определение жирности начертания, вида шрифта и стилей, рассматриваем сокращённую запись свойства font, декорации текста и другие эффекты, а так же межстрочные и межбуквенные интервалы.
- OpenType font features guide
-
Особенности шрифтов или их варианты ссылаются на различные стили символов или букв, содержащиеся в OpenType. Руководство описывает такие вещи как лигатура (специальные символы объединяющие буквы вроде 'fi' или 'ffl'), кернинг (то, как свободное место распределяется между различными символами) и другое. Всё перечисленное относится к особенностям OpenType и позволяет использовать в вебе специальные свойства и свойства контроля нижнего уровня
font-feature-settings
. В статье есть всё, что вам нужно знать об особенностях OpenType шрифтов в CSS. - Variable fonts guide
-
Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. This article will give you all you need to know to get you started using variable fonts.
Спецификации
Specification |
---|
CSS Fonts Module Level 4 |