Основы стилизирования текста и шрифта

Проценты и шрифты

Ещё есть проценты, но с ними сложнее: нужно знать размеры родительского элемента, чтобы процентам было от чего отталкиваться. Например, если мы просто напишем  font-size: 50%;, то браузер сделает так:

1. Поищет в стилях, есть ли где-то точное указание размеров шрифта для этого или родительского элемента.
2. Если есть — возьмёт 50 процентов от них.
3. Если нет — возьмёт стандартный размер шрифта для этого элемента из своих настроек и уже от них посчитает 50%.

Браузер взял размер шрифта 40 пикселей из общих настроек для всей страницы.

Теперь добавим отдельный стиль для абзаца и в нём укажем, что размер текста должен быть 50%:

А вот что будет, если мы удалим размер в пикселях из стиля body{} и дадим браузеру самому разобраться с размером:

Так как мы не задали точные размеры, то браузер взял какой-то свой размер абзаца по умолчанию и посчитал 50% от этого стандартного размера. Получилось мелко и нечитаемо.

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

Начнем с атрибута стиля font-family с помощью которого можно задать гарнитуру и тип шрифта, которым будет выведен текст html-элемента (например текст заголовка или абзаца p). Синтаксис применения атрибута выглядит так:

font-family: <список имен шрифтов разделенных запятыми>

Список имен шрифтов задается в виде их названий (например Arial, Verdana или Times New Roman). Если имя шрифта содержит пробелы, то его необходимо взять в кавычки. Можно указать несколько наименований шрифтов, разделив их запятыми. В этом случае браузер сначала будет искать первый из указанных шрифтов, в случае неудачного поиска — второй, третий и так далее:

p { font-family: Arial, Verdana, ‘Times New Roman’, san-serif; }

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

Таким образом можно задавать целые семейства шрифтов. Таких семейств всего пять:

• serif — шрифты с засечками;
• sans-serif -шрифты без засечек;
• cursive — шрифты, имитирующие рукописный текст;
• fantasy — декоративные шрифты;
• monospace — моноширинные шрифты.

Кроме имен шрифтов, свойству font-family можно задать особое значение inherit, которое говорит браузеру, что текст данного элемента нужно отображать таким же шрифтом, как и текст родительского элемента.

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.

Вернитесь в style.css:

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

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

Полезности

• HTML шорты: посторонние шрифты. Про подключение шрифтов и методы оптимизации.
• Статья о font-display. В ней кроме прочего приведена наглядная схема того, как работают все значения свойства.
• Исчерпывающее руководство по стратегиям загрузки веб-шрифтов. Подробный разбор плюсов и минусов методов подключения и оптимизации шрифтов.
• Оптимизация шрифтов. В статье разобраны разные методы: использование сабсетов шрифтов в зависимости от языка, HTTP-кеширование, Font Loading API и так далее.
• Доклад Вадима Макеева про шрифты.
• Subsetting Fonts with Glyphhanger. Статья о том, как использовать инструмент для создания сабсетов.

Цвет текста в CSS

Изменить цвет текста, расположенного внутри HTML элементов можно с помощью CSS свойства color.

Способы задания могут быть следующими:

• При помощи названия цвета (например, red, green, blue, white);
• При помощи значения RGB (например, rgb(221,102,212));
• При помощи шестнадцатеричного цветового значения (например, #ff00aa).

Пример:

<html>
<head>
<title>CSS цвет</title>
</head>
<body>
<p style="color:red">Текст 1 Текст 2 Текст 2</p>
<p style="color:rgb(245,100,255)">Текст 2 Текст 2 Текст 2</p>
<p style="color:#7722aa">Текст 3 Текст 3 Текст 3</p>
</body>
</html>

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

Объявление насыщенности в CSS

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

CSS-значение	Описание
100	Тонкий
200	Сверхлегкий
300	Легкий
400	Нормальное начертание (базовый)
500	Средний
600	Полужирное начертание
700	Жирный шрифт
800	Сверхжирное начертание
900	Плотное начертание
normal	Эквивалент значения 400 в CSS
CSS font bold	Эквивалент значения 700 в CSS
Bolder	На один уровень плотности больше, чем у родительского элемента
Lighter	На один уровень плотности меньше, чем у родительского элемента

• Вы будете сталкиваться с различными описаниями этих уровней, так как на данный момент не существует единых и универсальных названий и значений для них;
• Если нужно добиться более точных настроек насыщенности шрифтов, то я не рекомендую использовать относительные значения плотности (то есть lighter или bolder), а вместо них использовать числовые значения;
• В типографике каждый уровень насыщенности представляет собой отдельный шрифт, разработанный печатником. Из наиболее распространенных шрифтов для веб-страниц, лишь некоторые позволяют изменять уровни насыщенности (зачастую они представлены лишь в значениях 400 и 700, а во многих случаях только 400).

Что будет, если уровень насыщенности отсутствует?

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

Уровень плотности шрифта	Алгоритм выбора
100-300	Если указанная насыщенность находится в этом диапазоне, то при отсутствии нужного уровня производится подбор подходящего варианта в порядке возрастания значения.
400	Сначала проверяется значение 500. Если оно отсутствует, то подбор продолжается по вариантам ниже 400 в порядке убывания (то есть, 300-100), а затем по значениям выше 500 в порядке возрастания (то есть, 600-900).
500	Сначала проверяется значение 400. Если оно отсутствует, то подбор продолжается по вариантам ниже 400 в порядке убывания (то есть, 300-100), а затем по значениям выше 500 в порядке возрастания (то есть, 600-900).
600-900	Проверяются уровни насыщенности выше указанного значения, а затем перебираются значения ниже указанного в убывающем порядке.

Фальшивое жирное начертание:

Если в семействе шрифтов отсутствует указанный уровень насыщенности, некоторые браузеры могут изменять внешний вид текста ради выдержки стилизации. То есть, попытаются самостоятельно сгенерировать новый CSS font style bold. Этого лучше избегать, так как это может привести к неожиданным результатам в различных браузерах.

Можно воспользоваться свойством font-synthesis, предусмотренным в CSS3. Оно отвечает за то, разрешено ли браузеру самостоятельно синтезировать полужирный стиль в тех случаях, когда семейство шрифтов выглядит как полужирный текст. Ниже представлен пример использования этого свойства:

/* запрещаем браузеру синтезировать полужирный стиль шрифта */
font-synthesis: none;

Прежде чем использовать о font-synthesis в своих проектах, проверьте браузерную совместимость.

Вопросы и ответы

Я думаю, что стоит сразу же ответить на вопросы, которые могут возникнуть:

Почему свойство font-weight принимает лишь девять числовых значений?

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

Почему бы не использовать строчные значения (CSS font weight bold)для указания насыщенности в CSS?

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

Почему числовые значения насыщенности в CSS начинаются с 100, а не с 1?

Шрифтовая шкала 100-900 продиктована форматом шрифта TrueType, в котором 400 – это регулярный стиль (то есть, базовый). Такая же шкала используется в CSS и в формате OpenType.

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

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

Выравнивание текста в CSS

Выравнивание текста по горизонтали задаётся свойством text-align, которое может принимать следующие значения:

• left — выравнивание по левому краю;
• right — выравнивание по правому краю;
• center — выравнивание по центру;
• justify — выравнивание по всей ширине.

С помощью свойства vertical-align выполняется выравнивание текста по вертикали.

Данное свойство может принимать следующие значения:

• baseline — выравнивание линии элемента по базовой линии родительского элемента;
• middle — выравнивание средней элементной точки по базовой линии родительского элемента;
• text-top — выравнивание верхней части элемента по верху шрифта родительского элемента;
• top — выравнивание верха элемента по верхней части самого высокого элемента строки;
• sub, super — отображение элемента в виде нижнего и верхнего индексов соответственно.

Пример:

<title>Выравнивание текста по вертикали</title>
</head>
<body>
<table height="80" cellpadding="10" border="1">
<tr>
<td style="vertical-align:top">Текст 1</td>
<td style="vertical-align:bottom">Текст 2</td>
<td style="vertical-align:middle">Текст 3</td>
</tr>
</table>

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

Желаем удачи в изучении веб-дизайна!

Установка дополнительных шрифтов

Если вы решили, что вам нужен новый шрифт, воспользуйтесь любым из нижеописанных способов

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

При помощи официального магазина

У Windows 10 имеется собственный магазин, содержащий в том числе и шрифты для системы.

1. Оказавшись в подпункте «Шрифты» блока «Персонализация» (как перейти к этому разделу, описано в пункте «Просмотр списка установленных шрифтов»), кликните по строке «Получить дополнительные шрифты».Нажимаем на строчку «Получить дополнительные шрифты»
2. Развернётся список из доступных шрифтов. Изучите его и выберите тот вариант, который вам больше всего понравится.Выбираем подходящий шрифт
3. Перейдя к одному из предложенных товаров, кликните по кнопке «Получить» (или «Купить», если шрифт платный) и дождитесь окончания установки. После того как процесс окончится, новый шрифт будет добавлен.Нажимаем кнопку «Купить»

При помощи файла

В официальном магазине Microsoft есть далеко не все существующие шрифты. Большинство из них размещено на сторонних сайтах в бесплатном или платном виде. Windows 10 умеет работать с двумя форматами, содержащими шрифты: ttf и otf.

1. Скачав с любого ресурса файл любого из двух форматов, кликните по нему правой клавишей мыши и выберите функцию «Установить».В контекстном меню выбираем функцию «Установить»
2. Начнётся автоматическая процедура установки шрифта. От вас больше не потребуется каких-либо действий.Дожидаемся конца установки

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

При помощи специальной папки

В Windows есть специальная папка, содержащая все шрифты и позволяющая управлять ими. Перейти к ней можно по пути C:WindowsFonts. Для добавления шрифта перетащите или скопируйте файл формата ttf или otf в данную папку. После того как файл будет размещён, он автоматически добавится к списку остальных шрифтов.

При помощи сторонней программы

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

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

FontMassive Light

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

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

Работать со шрифтами удобнее в FontMassive Light

FontForge

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

При помощи FontForge можно создать свой шрифт

Установка шрифтов PostScript Type 1

PostScript — это специальный язык программирования, разработанный компанией Adobe. Он часто используется в описании PDF-файлов, а также для хранения и описания шрифтов. PostScript Type 1 — всемирно принятый формат кодирования.

Для установки шрифтов данного формата потребуется специальная программа от компании Adobe — Adobe Type Manager. Скачав и открыв её, перейдите к вкладке Add Fonts, укажите путь до файла со шрифтом и используйте кнопку Add. Готово, новый шрифт добавлен в вашу библиотеку.

Указываем путь до шрифта и нажимаем кнопку Add

Визуальное оформление текста в CSS

В CSS оформление текста осуществляется с помощью параметра text-decoration, который может принимать следующие значения:

• blink — мерцающий текст;
• none — значение по умолчанию, оформление отсутствует;
• overline — линия расположена над текстом;
• underline — подчеркнутый линией текст;
• line-through — текст, зачеркнутый линией;
• inherit — в данном случае text-decoration наследует значение родительского элемента.

Пример:

<a href="index.html" style="text-decoration:none">Текст ссылки</a>
<a href="index.html" style="text-decoration:overline">Текст ссылки</a>
<a href="index.html" style="text-decoration:underline">Текст ссылки</a>
<a href="index.html" style="text-decoration:line-through">Текст ссылки</a>
<a href="index.html" style="text-decoration:none">Текст ссылки</a>

В окне браузера данный пример будет выглядеть следующим образом:

Межстрочный интервал

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

Стандартное значение межстрочного интервала — normal. Это значит, что браузер спросит у шрифта, какое межстрочное расстояние тот предпочитает. Вам ни о чём думать не нужно:

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

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

Установить размер шрифта С Em

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

Размер блока EM рекомендуется W3C.

1em равен текущему размеру шрифта. размер шрифта по умолчанию в браузерах 16px. Таким образом, по умолчанию размер 1em является 16px.

Размер может быть рассчитано из пикселей в EM , используя эту формулу:пикселей/ 16 =EM

пример

h1 {    font-size: 2.5em; /* 40px/16=2.5em */}h2 {    font-size: 1.875em; /* 30px/16=1.875em */
}p {    font-size: 0.875em; /* 14px/16=0.875em */}

В приведенном выше примере, размер текста в ЕМ является такой же, как и в предыдущем примере в пикселях. Тем не менее, с размером их, можно настроить размер текста во всех браузерах.

К сожалению, все еще существует проблема с более старыми версиями IE. Текст становится больше, чем он должен, когда сделано больше, и меньше, чем должен, когда становится меньше.

Свойство font-size

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

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

Установка font-size в пикселях (px)

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

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

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

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

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

Установка font-size в единицах em

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

Итак, если вы установите для элемента , то и .

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

Давайте посмотрим на следующий пример, чтобы понять, как это работает:

Использование комбинации % и em

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

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

Установка font-size в единицах rem

Для большей отзывчивости, в CSS3 введены единицы измерения rem (сокращенно от root em), которые всегда зависят от размера шрифта корневого элемента (), независимо от того, где находится элемент в документе (в отличие от , который расчитывается относительно размера шрифта родительского элемента).

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

Установка font-size с помощью ключевых слов

CSS предоставляет возможность использования некоторых ключевых слов для определения размеров шрифта.

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

Ключевое слово равно стандартному размеру шрифта в браузере, который обычно составляет . Аналогично, — это эквивалент , — , — , — , — и — .

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

Установка font-size в единицах vw и vh

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

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

Посмотрим следующий пример:

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

В этом примере, даже если ширина области просмотра становится равной , размер шрифта будет по крайней мере равен или .

Для создания более гибкой типографики вы можете использовать медиазапросы CSS.

Веб-шрифты

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

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

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

Поддержка форматов

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

Формат файла шрифта	Какие браузеры поддерживают
TTF	Поддерживают все браузеры, кроме: Internet Explorer 8 (и ниже), Opera Mini 5.0-8.0
EOT	Поддерживает только Internet Explorer
WOFF	Поддерживают все браузеры, кроме: Internet Explorer 8 (и ниже), Opera Mini 5.0-8.0, Android Browser 4.1-4.3
SVG	Chrome до версии 37 (включительно), Safari, iOS Safari, Android Browser

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

Подключаем веб-шрифт с помощью @font-face

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

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

@font-face {
	font-family: MyUniqueFont;
	src: url('fonts/MyUniqueFont.ttf');
}

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

p {
	font-family: MyUniqueFont;
}

Во второй строке указывается путь к файлу шрифта. В нашем примере файл находится в папке . У вас URL-адрес может отличаться.