Что такое @font-face на самом деле
После увиденного мной в коде коллег неадекватного применения font-face:
font-weight: normal; font-family: BrutalType-Bold, sans-serif;я понял, что что-то не так в датском королевстве. Скорее всего в одной статье всего не объять, но давайте просто начнём.
Допустим, собрались вы в 2021 году подключить шрифт. Начитавшись про то, как же всё плохо (на самом деле, нет) с сервисом Google Fonts, решили подключать локально. Приобрели (естественно) пакет шрифтов, распаковали и увидели следующее:
Зрелище не для слабонервных, понятное дело. Сразу же возникает вопрос, как с этим быть (конвертацию и лицензирование оставим на потом). А ответ на него – @font-face.
При работе со шрифтами в CSS выделяют несколько понятий: семейство (font-family), насыщенность (начертание, font-weight), стиль (font-style), плотность (растяжение, font-stretch), вариант (font-variant) и кегль (размер, font-size).
Важно понимать: @font-face это не подключение файла шрифта буквально, а описание конкретного набора всех вышеупомянутых свойств для загруженного файла, до которого можно достучаться через обращение к ним же в правилах CSS нужных элементов.
Итак, давайте начнём с указания стиля, здесь вариантов три: normal, italic и oblique. Между italic и oblique разницу не все понимают и далеко не всегда их вообще разделяют. Если коротко, italic – это не только наклон, но и изменение внешнего вида шрифта, вплоть до лигатур (объединения символов), а oblique – те же символы, но под наклоном. И то и то в русском языке чаще всего называют курсивом.
Выходит, в реальной жизни нам остаются два: normal и italic. Если вы видите в названии шрифта слово Italic или аббревиатуру It – это «курсив», italic (MyriadPro-BoldSemiCnIt.otf, MyriadPro-It.otf). Oblique же задаётся аббревиатурой Ob (Obl), но вряд ли вы это где-то увидите.
Дальше идёт начертание. В CSS принято использовать числовые значения от 100 до 900 по степени увеличения насыщенности или же текстовые: normal (400), bold (700). Существуют ещё bolder и lighter, но они работают от наследуемого свойства и использовать их в @font-face не стоит!
В названиях шрифтов это обычно выражается так: Light (100, MyriadPro-Light.otf), Book (300), Regular (400, MyriadPro-Regular.otf), Medium (500), Semibold (600), Bold (700, MyriadPro-Bold.otf), Black (Solid, 900, MyriadPro-BlackCond.otf). Зачастую Black является отдельным семейством, но тут кому как. Естественно, истинные названия и соответствия остаются на усмотрение разработчика шрифта.
Следующее – font-stretch, плотность шрифта. Его широкость-узкость, если хотите. И здесь-то настоящее раздолье: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded (от наиболее узкого к наиболее широкому).
Как вы уже могли догадаться, действует то же правило аббревиатур: Cond, Cn – condensed (узкий, MyriadPro-Cond.otf, MyriadPro-LightCond.otf), SemiCond, SemiCn – semi-condensed (полусжатый, MyriadPro-SemiCn.otf), SemiExt – semi-extended (полуширокий, MyriadPro-SemiExtIt.otf) и так далее.
Остаётся font-variant, но у него всего два варианта: normal и small-caps (когда строчные буквы выглядят как уменьшенные прописные). Здесь с аббревиатурой не угадаешь, предлагайте ваши варианты в комментариях.
Давайте разберём пример подключения. Определим базовый шрифт для двух видов контейнеров (woff2 и opentype/otf):
@font-face
И какие-нибудь наиболее вычурные варианты:
@font-face < font-family: MyriadPro; src: url(MyriadPro-BlackSemiExtIt.woff2) format(woff2), url(MyriadPro-BlackSemiExtIt.otf) format(opentype); font-weight: 900; font-style: italic; font-stretch: semi-extended; font-variant: normal; >@font-face
Как видим, ничего сложного. Семейство всегда одно! Это можно применять как угодно, хоть объединить несколько разных шрифтов в группу «MyBestSiteDuckingFontEver».
.ex-heart < font-family: MyriadPro, sans-serif; font-weight: 900; font-stretch: semi-extended; font-style: italic; >.ex-soul
К первому классу применится файл MyriadPro-BlackSemiExtIt.woff2 (или otf, в зависимости от поддержки), а ко второму – MyriadPro-BlackSemiCn.woff2. Если не будет ни того, ни другого, то сбросится до MyriadPro-Regular.woff2. Здесь нужно быть внимательным: браузеры любят издеваться над шрифтами и пытаться сделать их жирнее или наклоннее, чем они есть. Особенно славится этим Chrome.
Если и Regular-файл не будет найден, то используется системный sans-serif шрифт, о порядке выбора локальных шрифтов стоит написать отдельный материал.
Надеюсь, мне удалось объяснить азы работы с коллекциями шрифтов и вы не будете больше писать код так, как мои коллеги. Осталось объяснить это им.
Атрибут face
Атрибут face служит для задания гарнитуры шрифтов, использующихся для текста. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден, браузер станет использовать следующий по списку.
Синтаксис
Значения
Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:
serif — шрифты с засечками (антиквенные), типа Times; sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial; cursive — курсивные шрифты; fantasy — декоративные шрифты; monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова.
Аналог CSS
Значение по умолчанию
Шрифт, установленный в браузере по умолчанию.
@font-face
Правило @font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на компьютер пользователя.
Синтаксис
@font-face
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
Внутри конструкции @font-face может находиться набор свойств для изменения параметров шрифта (font-family, font-size, font-style и др.), а также ссылка на шрифтовой файл. Ссылка записывается в виде src: url() , где — относительный или абсолютный путь к файлу.
Пример
Результат данного примера показан на рис. 1.
Рис. 1. Собственный шрифт на странице
Примечание
Браузер Internet Explorer до версии 9 поддерживает только шрифты формата EOT (Embedded OpenType).
Opera в некоторых случаях может не показывать на веб-странице текст выбранным шрифтом, заменяя его стандартным. Причём для локальных документов всё работает корректно. Это происходит в тех случаях, когда имя пользователя в Windows написано кириллицей.
Спецификация
| Спецификация | Статус |
|---|---|
| WOFF File Format 2.0 | Рабочий проект |
| WOFF File Format 1.0 | Рекомендация |
| CSS Fonts Module Level 3 | Возможная рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 5.5 | 9 | 12 | 4 | 10 | 12 | 3.1 | 3.5 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
Практика
Справочник CSS
- !important
- ::after
- ::backdrop
- ::before
- ::first-letter
- ::first-line
- ::marker
- ::placeholder
- ::selection
- :active
- :blank
- :buffering
- :checked
- :default
- :dir
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :focus-within
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :link
- :muted
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :paused
- :placeholder-shown
- :playing
- :read-only
- :read-write
- :required
- :root
- :seeking
- :stalled
- :target
- :valid
- :visited
- :volume-locked
- @charset
- @document
- @font-face
- @import
- @keyframes
- @media
- @page
- @supports
- @viewport
- accent-color
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- aspect-ratio
- backdrop-filter
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
- block-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- box-sizing
- caption-side
- caret-color
- clear
- clip
- color
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-kerning
- font-size
- font-stretch
- font-style
- font-variant
- font-weight
- gap
- height
- hyphenate-character
- hyphenate-limit-chars
- hyphens
- image-rendering
- justify-content
- left
- letter-spacing
- line-clamp
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- marks
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
- object-fit
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-x
- overflow-y
- padding
- padding-block
- padding-block-end
- padding-block-start
- padding-bottom
- padding-inline
- padding-inline-end
- padding-inline-start
- padding-left
- padding-right
- padding-top
- page-break-after
- page-break-before
- page-break-inside
- perspective
- perspective-origin
- place-content
- pointer-events
- position
- quotes
- resize
- right
- row-gap
- scroll-behavior
- tab-size
- table-layout
- text-align
- text-align-last
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip-ink
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-fill-color
- text-indent
- text-orientation
- text-overflow
- text-shadow
- text-stroke
- text-stroke-color
- text-stroke-width
- text-transform
- top
- transform
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- unicode-bidi
- user-select
- vertical-align
- visibility
- white-space
- widows
- width
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index
- zoom
Правило @font-face
Каждый веб-дизайнер мечтает о создании сайта с красивой типографикой. Но к сожалению, браузеры поддерживают лишь несколько гарнитур, так называемых «безопасных для веб» шрифтов. В стандартный набор входят следующие шрифты: Arial, Verdana, Times, Georgia, Courier New и несколько других.
Гарнитура определяет набор из одного или более шрифтов, каждый из которых состоит из символов, имеющих общие конструктивные особенности — вес, стиль, дизайн, начертание, плотность, размер, например, шрифты без засечек (или гротески), шрифты с засечками (антиква). Гарнитура состоит из набора знаков (цифры, буквы, знаки пунктуации, специальные символы, также может состоять из неалфавитных символов).
Шрифт — это набор символов конкретного размера, веса и стиля. Например, шрифт Times New Roman стиль italic размера 16px — это один шрифт, а Times New Roman стиль italic размера 10px — это уже другой.
Правило @font-face позволяет подключать разнообразные пользовательские шрифты. Браузер загружает шрифты в кэш и использует их для оформления текста на странице. Такой подход называется встраиванием шрифтов, а встроенные шрифты — веб-шрифтами.
Правило @font-face нужно размещать перед всеми остальными правилами css, так как этот прием улучшит производительность страницы. Загружаемые шрифты можно помещать в специальную папку fonts , созданную на сервере.
Чтобы подключить шрифт с помощью правила @font-face , нужно:
- загрузить файл шрифта на сервер в нескольких форматах для поддержки всеми браузерами,
- указать название шрифта, прописать ссылку на файл и задать описание шрифта,
- добавить имя шрифта в свойство font-family элемента, который будет отображаться данным шрифтом.
@font-face < font-family: "WebFont"; src: url(WebFont.eot?) format("eot"), /* IE8+, знак ? позволяет обойти баг в обработчике значения src */ url(WebFont.woff) format("woff"), /* все современные браузеры, IE9+ */ url(WebFont.ttf) format("truetype"); /* все современные браузеры */ >p
Этот код говорит браузеру отображать текст внутри элемента
, используя шрифт WebFont. Если браузер по какой-либо причине не сможет загрузить данный шрифт, он выберет подходящий из списка шрифтов. Он перебирает их в указанном порядке до тех пор, пока не находит шрифт, который сможет успешно использовать.
Внутри каждого семейства шрифта можно определить до девяти значений жирности (веса). Поэтому для каждого встраиваемого шрифта, а также для каждого начертания нужно задавать отдельное правило @font-face , т.е. нельзя объявить в одном правиле два разных шрифта или шрифт одного семейства, но разных стилей и веса.
@font-face
@font-face
В общем виде для шрифта можно задать следующие свойства:
@font-face
Если вы предполагаете, что на компьютере пользователя установлен данный шрифт и хотите, чтобы шрифт загружался только после проверки его наличия у пользователя, то можно воспользоваться значением local() для задания адреса:
@font-face
Форматы веб-шрифтов
Свойство @font-face имеет хорошую поддержку в браузерах, но разные браузеры используют разные форматы шрифтов. Существуют четыре основных формата шрифтов:
- Формат WOFF (Web Open Font Format), открытый сетевой формат шрифта, разработанный в Mozilla. Технически WOFF нельзя назвать форматом шрифта, так как он представляет собой лишь оболочку с функцией сжатия. Формат сжимает шрифты в формате TTF/OTF для использования их в интернете. Также, WOFF позволяет добавлять к файлу метаданные, например, сведения о лицензии.
- Форматы OTF/TTF (OpenType Font и TrueType Font) работают в большинстве браузеров. Оба формата распространяются свободно.
- Формат EOT (Embedded Open Type) создан разработчиками Microsoft, представляет сжатую копию шрифта TTF, повторное использование которого запрещается технологиями DRM (Digital Rights Management, цифровое управление правами доступа). Поддерживается только в IE, начиная с 8-й версии.
- SVG/SVGZ (Scalabe Vector Graphics) — тип файлов шрифтов, представляющий векторное начертание шрифта. Как правило, имеет меньшие размеры файлов, тем самым позволяя улучшить производительность на мобильных устройствах. Работает в Opera Mobile и iOS Safari.
Сложности использования встроенных шрифтов
- Файлы шрифтов могут быть больших размеров, поэтому в некоторых случаях добавление @font-face замедляет загрузку страниц.
- С некоторыми шрифтами связаны лицензионные ограничения, не допускающие бесплатного использования.
- Некоторые шрифты просто плохо смотрятся на веб-страницах.
Полезные ресурсы
Font Squirrel — сервис, позволяющий конвертировать веб-шрифты разных форматов. Небольшой минус — высота некоторых символов после конвертации может различаться. Шрифт загружается на сервис по кнопке Upload Fonts.
Webfont.ru — ресурс, содержащий коллекцию бесплатных шрифтов для сайтов. На сайте также есть форум, где можно задавать вопросы, касающиеся использования того или иного шрифта. В закладке «Полигон» вы сможете увидеть, как будет выглядеть текст, поиграв с размерами, задав для него тень и т.д.
Transfonter — быстрый и удобный генератор правила @font-face для веб-шрифтов.