Css задание своего шрифта

Как задать свои шрифты в CSS?

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

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

В этом мануале мы покажем, как использовать @font-face для загрузки шрифта на веб-страницу. Для этого мы скачаем популярный открытый шрифт, Roboto Mono. При помощи свойства font-display мы настроим отображение шрифта – это позволит нам создать лучший пользовательский интерфейс.

Требования

• Редактор кода (например nano или Visual Studio Code).
• Веб-браузер.
• Базовые навыки работы с HTML. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

1: Загрузка шрифтов и создание веб-страницы

Прежде чем мы начнем изучать правило @font-face, мы должны создать тестовую веб-страницу и каталог.

В рабочем каталоге создайте новую папку для тестового сайта и подкаталог для файлов шрифтов:

Перейдите в корневой каталог нового проекта, который называется website:

Из этого каталога мы будем запускать все остальные команды.

Теперь мы воспользуемся командой curl, чтобы загрузить шрифт Roboto Mono. Мы используем популярное приложение google-webfonts-helper, которое позволяет загружать несколько шрифтов непосредственно из сети доставки контента Google при помощи одного аккуратного GET-запроса.

Давайте загрузим два разных по стилю и толщине вида Roboto Mono, regular and 700italic.

curl -o ./fonts/fontfiles.zip «https://google-webfonts-helper.herokuapp.com/api/fonts/roboto-mono?download=zip&subsets=latin,latin-ext&variants=regular,700italic&formats=woff,woff2,ttf»

Обратите внимание на то, как мы указали виды шрифтов из семейства Roboto Mono, которые нам нужны. Затем мы указали необходимые форматы для каждого шрифта: ttf, woff и woff2. Формат woff2 – это самый современный формат веб-шрифтов, но woff2 все еще не поддерживается некоторыми браузерами. Поэтому мы также загрузим запасной вариант – формат woff, который имеет широкую поддержку (включая Internet Explorer 9) и формат TrueType, или ttf. В итоге мы получим отличный охват, но во время работы над CSS мы также предоставим больше альтернативных вариантов на основе стандартных шрифтов. Свойство font-display поможет управлять загрузкой шрифтов на странице в разных браузерах.

Теперь извлеките загруженные шрифты в папку ./fonts. На машинах Linux и macOS используйте следующую команду:

unzip ./fonts/fontfiles.zip -d ./fonts

Теперь изучите содержимое папки ./fonts:

Вы увидите в ней шесть новых файлов – файл .ttf, .woff и .woff2 для каждого шрифта.

Загрузив шрифты, мы можем переходить к работе с CSS и стилизации HTML-элементов.

2: Правило @font-face

Теперь мы попробуем применить загруженные шрифты с помощью свойства @font-face.

С помощью nano или другого текстового редактора создайте и откройте файл style.css:

Добавьте следующий код, который содержит определение правила @font-face с путями к файлам:

font-family: ‘Roboto Mono’, monospace;

src: url(fonts/roboto-mono-v12-latin-regular.woff2) format(‘woff2’),

font-family: ‘Roboto Mono’, monospace;

src: url(fonts/roboto-mono-v12-latin-700italic.woff2) format(‘woff2’),

font-family: ‘Roboto Mono’, monospace;

font-family: ‘Roboto Mono’, monospace;

Давайте подробно рассмотрим этот код.

Определять правила @font-face всегда нужно в главном файле CSS. Самая простая версия правила @font-face требует свойств font-family и src. В первом блоке кода мы указываем Roboto Mono в качестве значения для свойства font-family, а в src предоставляем пути к трем файлам в разных форматах – это делается в порядке убывания приоритета.

Во втором блоке свойство font-family имеет то же значение, но тут мы указываем пути к версии 700italic. Затем мы определяем два свойства: font-weight и font-style. Эти свойства помогут нам определить, где мы хотим использовать вторую версию Roboto Mono.

В следующих двух блоках мы определяем индивидуальные стили для элементов и

. Обратите внимание, мы используем свойство font-family для обоих элементов, но добавляем font-weight и font-style в блок для . Благодаря этому заголовки H1 будут отображаться шрифтом Roboto Mono 700italic, а не Roboto Mono regular.

Сохраните и закройте файл.

Теперь давайте создадим небольшую HTML-страницу с тегами и

.

Создайте и откройте новый файл index.html:

Добавьте в файл следующий код, который определяет заголовок и строку текста:

Roboto Mono font, 700italic

Сохраните и закройте файл.

Загрузите index.html в браузере. Вы увидите, что заголовок отображается шрифтом Roboto Mono 700italic, а текст абзаца – Roboto Mono regular:

Roboto Mono font, 700 italic

Теперь, когда вы знаете, как работает свойство @font-face, мы попробуем использовать font-display, чтобы настроить отображение шрифтов на странице.

3: Управление отображением шрифтов с помощью font-display

С помощью font-display мы можем точно контролировать отображение шрифтов на странице. Это может значительно улучшить пользовательский опыт.

Иногда при использовании нестандартных шрифтов пользователь может столкнуться с FOUT (вспышкой неоформленного текста – flash of unstyled text) или FOIT (вспышкой невидимого текста – flash of invisible text) при первой загрузке страницы. Некоторые браузеры предпочитают отображать текст сразу, даже если нестандартный шрифт еще не загружен. Браузер отобразит нужный шрифт после полной загрузки, но в результате пользователь столкнется с FOUT. Также бывает, что браузер на короткое время скрывает текст, если шрифт еще не загрузился – это FOIT. Если шрифт не загружается в течение определенного периода, браузер использует запасной шрифт.

Один из способов справиться с FOUT –использовать инструмент Font Style Matcher, который помогает найти резервный шрифт, максимально приближенный к пользовательскому (чтобы изменение шрифта не было таким резким). Однако для более гибкой обработки подобных проблем можно использовать свойство font-display.

Чтобы устранить проблемы с загрузкой шрифтов на странице, font-display принимает одно из 5 значений:

• auto: использует стандартное поведение браузера (которое может отличаться от браузера к браузеру).
• block: текст скрывается на короткий период и отображается после загрузки пользовательского шрифта. Считается, что это значение имеет бесконечный период подмены шрифта.
• swap: браузер не скрывает текст, а меняет шрифт на пользовательский, когда он становится доступным. Это значение также предусматривает бесконечный период подмены.
• fallback: текст скрывается на очень короткий период (это называется период блокировки шрифта), а затем у браузера есть короткий период подмены. Если пользовательский шрифт не загружается в течение периода подмены, он не загружается вообще.
• optional: на загрузку тексту дается очень короткий период блокировки шрифта (~100 мс). Если шрифт не загружается в течение этого периода блокировки, браузер использует резервный шрифт, а пользовательский шрифт после этого вообще не отображается. Однако браузер будет пытаться незаметно загрузить и кешировать пользовательский шрифт: при последующих загрузках страницы пользовательский шрифт станет доступным в кеше, а затем отобразится на странице.

Значение optional параметра font-display – хорошее решение для многих проблемных ситуаций отображения шрифтов. Давайте используем это значение его в нашем файле CSS.

Добавьте в файл выделенный код:

font-family: ‘Roboto Mono’, monospace;

src: url(fonts/roboto-mono-v12-latin-regular.woff2) format(‘woff2’),

font-family: ‘Roboto Mono’, monospace;

src: url(fonts/roboto-mono-v12-latin-700italic.woff2) format(‘woff2’),

Источник

Способы задания шрифтов в CSS

Шрифт – это важная составляющая веб-дизайна, придающая сайту узнаваемость и выразительность.

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

Как задать шрифт в CSS?

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

Для категоризации используют два типа имён: гарнитура шрифта family name и общее семейство generic family .

Первый тип — название шрифта (например, Calibri, Times New Roman и т. д.), второй — группа шрифтов с характерными общими чертами (например, sans-serif ).

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

Список шрифтов может выглядеть следующим образом:

Основные свойства шрифтов в CSS

В CSS при описании шрифта используют следующие характеристики:

Стиль

Стиль шрифта определяет тип начертания для представления текста: наклонный, курсивный или обычный.

Атрибут font style может принимать такие значения как:

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

Вариант шрифта

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

Свойство font variant может иметь одно из двух возможных значений:

Вес шрифта

В CSS жирный шрифт или наоборот, более светлый, задаётся параметром font weight . Некоторыми браузерами поддерживаются числовые значения в описании веса.

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

• normal (обычный);
• lighter (светлее);
• bold (жирный);
• bolder (ещё более жирный);
• 100-900 (числовое описание веса, в котором значение 100 соответствует самому тонкому начертанию, а 900 — самому толстому начертанию).

Размер шрифта

Размер шрифта — это расстояние от нижней кромки текста до границ кегельного пространства. Если в HTML данный параметр варьируется от 1 до 7 условных единиц, что не далеко не всегда является удобным, то в CSS с помощью свойства font size размер шрифта можно указать с точностью до пикселя.

Например, задание шрифта размером 20 пикселей выглядит таким образом:

Также, размер шрифта можно задать с помощью процентов от его базового размера.

Например, шрифт с параметрами:

будет отображён на 50% больше стандартного размера. В том случае, если гарнитура и размер шрифта не указаны, браузером будет выводиться базовый шрифт Times New Roman со стандартным, на усмотрение браузера, размером.

Цвет шрифта

Возможности CSS позволяют задать цвет текста и его фона с помощью следующих свойств:

Цветовые значения рекомендуется указывать в общепринятом шестнадцатеричном виде цветовой модели RGB .

Например, белый текст на чёрном фоне будет иметь такие значения:

Первая пара цифр отвечает за уровень красного цвета, вторая — за уровень зелёного цвета, а третья — за уровень синего.

Минимальное значение — 0, а максимальное — f. Этот принцип позволяет самостоятельно « придумать » значения некоторых цветов: например, если первой паре цифр присвоить максимальное значение, а второй и третьей — минимальные, получится насыщенный красный цвет #ff0000 .

Смешивая цвета, можно получать дополнительные оттенки: совокупность красного и синего цветов, как известно, дадут красно-фиолетовый #ff00ff .

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

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

Надеемся, что данное руководство было для вас полезно. Желаем успехов!

Источник