Содержание
Учебник CSS 3. Статья «Работа со шрифтами в CSS»
В этой статье Вы узнаете основную информацию о шрифтах в CSS, а именно: как управлять размером шрифта, его начертанием и жирностью, научитесь подключать безопасные и веб-шрифты, узнаете какие бывают шрифты и где их можно найти. Кроме того, на примере службы Google Fonts подключим веб-шрифты на наши страницы.
Для привлечения внимания посетителей Вашего сайта вы можете придать привлекательный вид текстовому содержимому страниц. Для этих целей в CSS существует большое количество разнообразных свойств форматирования: шрифт текста, его цвет, размер, межстрочный интервал и так далее. В первую очередь рассмотрим методы работы с существующими шрифтами (безопасные веб-шрифты).
Безопасные веб-шрифты
В CSS стиле для выбора типа шрифта применяется свойство font-family, в котором указывается интересующий Вас шрифт. Предположим, что вы хотите применить для абзацев страницы шрифт Courier. В этом случае Вам необходимо будет создать, например, селектор типа и воспользоваться свойством font-family:
p {
font-family : Courier; /* устанавливаем тип шрифта – Courier */
}
Главная особенность данного способа заключается в том, что он будет работать, при условии, что у посетителя установлен подобный шрифт, иначе, страница будет отображена с использованием шрифта «встроенного» в браузер.
Так как вы заранее не знаете, есть у пользователя тот, или иной шрифт, то рекомендуется указывать не только основной шрифт, но и пару запасных (альтернативных) шрифтов, для того случая если у пользователя отсутствует основной шрифт.
Рекомендуется последним в списке шрифтов указывать и семейство шрифта (generic-family). Если у пользователя по каким-то причинам отсутствуют все перечисленные Вами шрифты, то в этом случае страница будет отображена хотя бы шрифтом того же семейства, а не шрифтом «встроенным» в браузер.
Давайте рассмотрим следующий пример:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Свойство font-family</title>
<style>
.times {
font-family: "Times New Roman", serif; /* определяем основной шрифт "Times New Roman", альтернативный serif (с засечками)*/
}
.courier {
font-family: Courier, monospace; /* определяем основной шрифт "Courier", альтернативный monospace (семейство моноширинных шрифтов) */
}
</style>
</head>
<body>
<p class = "times">Параграф, отображаемый шрифтом "Times New Roman".</p>
<p class = "courier">Параграф, отображаемый шрифтом "Courier".</p>
</body>
</html>
В данном примере для первого абзаца браузер проверит, есть ли в наличии у пользователя основной шрифт, если нет, то установит шрифт из семейства serif (с засечками). Для второго абзаца был задействован моноширинный шрифт Courier, а как альтернатива семейство моноширинных шрифтов (буквы имеют одинаковую ширину).
Шрифты, которые содержат в названии более одного слова, либо цифры, необходимо обязательно помещать в кавычки.
Результат нашего примера:
Рис. 34 Пример использования свойства font-family.
Ниже я перечислю некоторые часто используемые комбинации безопасных веб-шрифтов, которые с большой вероятностью присутствуют на любом компьютере:
| Семейство шрифта (font-family) | Пример |
|---|---|
| Arial, Helvetica, sans-serif | Съешь же еще этих сочных мандаринов. |
| «Arial Black», Gadget, sans-serif | Съешь же еще этих сочных мандаринов. |
| «Comic Sans MS», cursive, sans-serif | Съешь же еще этих сочных мандаринов. |
| Impact, Charcoal, sans-serif | Съешь же еще этих сочных мандаринов. |
| «Lucida Sans Unicode», «Lucida Grande», sans-serif | Съешь же еще этих сочных мандаринов. |
| Tahoma, Geneva, sans-serif | Съешь же еще этих сочных мандаринов. |
| «Trebuchet MS», Helvetica, sans-serif | Съешь же еще этих сочных мандаринов. |
| Verdana, Geneva, sans-serif | Съешь же еще этих сочных мандаринов. |
| Семейство шрифта (font-family) | Пример |
|---|---|
| Georgia, serif | Съешь же еще этих сочных мандаринов. |
| «Palatino Linotype», «Book Antiqua», Palatino, serif | Съешь же еще этих сочных мандаринов. |
| «Times New Roman», Times, serif | Съешь же еще этих сочных мандаринов. |
| Семейство шрифта (font-family) | Пример |
|---|---|
| «Courier New», Courier, monospace | Съешь же еще этих сочных мандаринов. |
| «Lucida Console», Monaco, monospace | Съешь же еще этих сочных мандаринов. |
Типы веб-шрифтов и их поддержка браузерами
Все современные браузеры поддерживают использование определённых веб-шрифтов. Происходит это следующим образом: браузер пользователя загружает шрифт с указанного сервера и применяет его для отображения текущей страницы. В настоящее время существуют следующие виды веб-шрифтов:
- TTF/OTF (True Type и Open Type Fonts) — эти шрифты имеют широкую поддержку. Разработаны Microsoft совместно с Adobe, с целью применения в различных операционных системах.
- WOFF (Web Open Font Format) — сжатая версия шрифтов TTF/OTF. Формат включает в себя метаданные, в которые автор шрифта может добавить информацию об использовании шрифта. WOFF-формат имеет широкую поддержку со стороны браузеров.
- WOFF2 (Web Open Font Format 2) — спецификация была разработана, чтобы обеспечить улучшенное сжатие и тем самым снизить использование пропускной способности сети, в то же время, позволяя быстро производить декомпрессию даже на мобильных устройствах.
- SVG (Scalable Vector Graphic) – способ создания векторной графики. SVG-формат имеет очень ограниченную поддержку (IOS/Safari). Планируется, что он перестанет использоваться в Chrome.
- EOT (Embedded Open Type) – шрифты, которые поддерживаются только в Internet Explorer/Edge (разработаны компанией Microsoft для использования в качестве встроенных шрифтов на веб-страницах).
Ответственность и поиск веб-шрифтов
Сразу хочу обратить Ваше внимание на то, что многие шрифты создаются с целью заработать на них деньги и соответственно распространяются на коммерческой основе.
Чтобы не сталкиваться с любыми правовыми вопросами, связанными с использованием «платных» шрифтов на бесплатной основе, я рекомендую Вам, пользоваться службами шрифтов, например, такой как Google Fonts или, крупными коллекционными порталами, например, Webfont.ru. На начальном этапе Вам этого хватит «за глаза».
Добавление веб-шрифта на страницу
Для добавления шрифта на страницу Вам необходимо:
- использовать правило CSS @font-face, которое сообщает браузеру пользователя, откуда необходимо загружать шрифт и какое имя шрифта при этом используется. При работе с правилом @font-face важным моментом является размещение его в начале вашей таблицы стилей, это позволит вашему браузеру сразу преступить к обработке необходимого шрифта.
- использовать CSS свойство font-family, чтобы указать имя задействованного шрифта и применить к интересующему Вас фрагменту текста (по аналогии работы с локальными шрифтами).
Давайте рассмотрим пошаговое подключение сторонних шрифтов, на примере использования службы Google Fonts.
- Переходим на сайт службы Google Fonts.
- Выбираем понравившийся нам шрифт, я остановился на шрифте без засечек Roboto, Вы можете найти его в поиске, либо выбрать любой другой:
- После этого необходимо добавить его в коллекцию (у Вас должен быть создан аккаунт Google):
- После добавления шрифта в коллекцию, для Вас будет доступна возможность скачать его:
- Распакуйте архив со шрифтами в директорию, из которой они будут подключаться к Вашей веб-странице, либо страницам:
Как Вы можете заметить, в архиве содержится 12 различных шрифтов. Исходя из названий можно установить, что, например, Roboto-Italic предназначен для курсивного стиля шрифта, Roboto-Bold для жирного начертания шрифта, Roboto-BoldItalic для курсивного жирного начертания и так далее.
Еще раз обращаю Ваше внимание, что один файл шрифта содержит:
- одну плотность шрифта.
- один стиль для этого шрифта.
Обратите внимание на важный момент — если Вам необходимо получить полужирные и курсивные шрифты, то необходимо подгружать их отдельно (использовать правило CSS @font-face для данного типа шрифта)!
Конечно в том случае, если они существуют для понравившегося Вам варианта шрифта, обязательно учтите эти моменты при работе с веб-шрифтами!
Приступим к подключению, загруженных нами шрифтов к нашему документу. Для заголовков второго уровня (элемент <h3>) мы будем использовать шрифт — Roboto-Bold. Для абзацев (элемент <p>) будем использовать шрифт Roboto-Regular, а для курсивного начертания (элемент <i>) — Roboto-Italic.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Пример использования правила @font-face</title>
<style>
@font-face {
font-family: "Roboto"; /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src: url("/fonts/Roboto-Regular.ttf") format('truetype'); /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style: normal; /* указываем, что стиль шрифта обычный - это значение по умолчанию */
font-weight: normal; /* определяет нормальное начертание символов - это значение по умолчанию */
}
@font-face {
font-family: "Roboto"; /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
/* для упрощения работы со шрифтами допускается использовать одинаковое имя, но при этом начертание или стиль шрифта должен отличаться. IE 8 и ниже не поддерживают такой подход и если Вы хотите поддерживать эти браузеры, то Вам необходимо называть каждый шрифт по разному и более детально стилизовать каждый селектор */
src: url("/fonts/Roboto-Bold.ttf") format('truetype'); /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style: normal; /* указываем, что стиль шрифта обычный - это значение по умолчанию */
font-weight: bold; /* определяет жирное начертание символов */
}
@font-face {
font-family: "Roboto"; /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src: url("/fonts/Roboto-Italic.ttf") format('truetype'); /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style: italic; /* указываем, что стиль шрифта курсивный */
font-weight: normal; /* определяет нормальное начертание символов - это значение по умолчанию */
}
h3, p, b, i { /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family: "Roboto", sans-serif; /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif) */
}
</style>
</head>
<body>
<h3>Немного о пандах</h3>
<p><b>Большая панда</b> (<i>Ailuropoda melanoleuca</i>) — бамбуковый медведь, одно из редчайших вымирающих животных, занесённых в международную Красную книгу; единственный современный представитель рода <b>большие панды</b> (<i>Ailuropoda</i>).</p>
</body>
</html>
И так, что мы сделали в этом примере:
- Добавили три правила @font-face в начало наших CSS стилей (это важно).
- В каждом правиле с использованием CSS свойства (font-family) мы указали одно название шрифта, вы можете использовать своё название для всех правил, но будет лучше и понятнее если оно будет совпадать с наименованием шрифта.
- В каждом правиле мы указали путь к файлу, который содержит шрифт с разрешением TTF (True Type Font).
- Далее мы для всех правил с использованием свойства (font-style) указали стиль шрифта: для двух правил шрифт отображается обычным стилем — normal (это значение по умолчанию), а для одного указали, что он отображается курсивом (italic).
- Кроме того, для всех правил с использованием свойства (font-weight) указали жирность шрифта: для двух правил шрифт отображается обычной жирности — normal (это значение по умолчанию), а для одного указали что он отображается жирным шрифтом (bold).
- Нам осталось только применить наши шрифты к элементам. Для этого мы создали групповой селектор в котором с использованием ранее рассмотренного свойства font-family указали тип нашего шрифта и как альтернативу через запятую указали семейство шрифта, это сделано для того, что если по какой-то причине браузер пользователя не сможет загрузить наши шрифты, он смог использовать шрифты из указанного семейства, а не встроенные в браузер.
Результат нашего примера:
Рис.38 Пример использования правила @font-face.
Для полноты картины, давайте рассмотрим, как добавлять несколько вариантов шрифтов (для поддержки современных более сжатых версий шрифтов):
@font-face {
font-family: "Roboto"; /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src:
local("font"); /* проверяется есть ли шрифт на локальном компьютере пользователя по имени, если нет то поиск осуществляется в других указанных источниках */
url("/fonts/font.woff2") format('woff2'); /* задаем путь к шрифту (url) и тип шрифта (format) */
url("/fonts/font.woff") format('woff'); /* задаем путь к шрифту (url) и тип шрифта (format) */
url("/fonts/font.ttf") format('truetype'); /* задаем путь к шрифту (url) и тип шрифта (format) */
}
Как вы можете заметить, для того, чтобы добавить несколько вариантов шрифтов необходимо указать несколько путей к файлам, которые содержат шрифты с определенным разрешением.
Обращаю Ваше внимание, что порядок, в котором вы указываете варианты шрифтов, имеет важное значение, так как Ваш браузер выбирает первый поддерживаемый шрифт. К примеру, если Вы хотите использовать шрифты на сайте WOFF2, которые поддерживаются не всеми браузерами, то необходимо их указать до WOFF.
В настоящее время с некоторыми браузерами могут возникать проблемы при использовании директивы local, которая служит для проверки наличия шрифта (по определенном имени) на локальном компьютере пользователя, по этой причине я не рекомендую Вам использовать её в своих проектах, для этих целей более надежным является использование скриптов.
Добавление веб-шрифта со стороннего ресурса
Давайте рассмотрим на примере службы Google Fonts варианты подключения шрифтов к Вашим страницам без загрузки их на Ваш сервер.
- Переходим на сайт службы Google Fonts.
- Выбираем понравившийся нам шрифт, я остановился на том же шрифте, который мы использовали в прошлый раз — шрифт без засечек Roboto. Вы можете использовать поиск по наименованию для его нахождения.
- После добавления шрифта необходимо нажать на вкладку «Family-selected» (выбранные вами шрифты):
- Далее необходимо выбрать те стили шрифтов, которые мы будем использовать на нашем сайте. Для этого необходимо перейти на вкладку «Customize»
Например, меня интересуют следующие:
- Для заголовков (элемент <h3>) и для жирного начертания я буду использовать шрифт – Bold 700 (Roboto Bold в наборе).
- Для абзацев (элемент <p>) будем использовать шрифт Normal 400 (Roboto Regular в наборе), а для курсивного начертания Normal 400 Italic (Roboto Italic в наборе).
При выборе Вам отобразят влияние тех или иных шрифтов на время загрузки страницы.
Используя множество стилей шрифтов, может привести к замедлению загрузки Вашей страницы, поэтому рекомендуется выбирать только те шрифты, которые вам действительно необходимы на вашем сайте.
Первый вариант подключения (Standard). Создание ссылки на внешнюю таблицу стилей, используя HTML тег <link>. В адресе ссылки указывается веб-сервер Google и информация, которая необходима Google для загрузки необходимых шрифтов (как правило, это формат woff2 для современных браузеров, определение типа поддерживаемого шрифта происходит на стороне сервера Google в зависимости от Вашего браузера).
Как вы видите, в ссылке указывается наименование шрифта, толщина шрифта и какой набор символов используется. Если вы внимательно читали статью «Введение в CSS», то Вы уже догадались, что необходимо эту ссылку указать на каждой странице, где необходимо использовать данные шрифты.
Обращаю Ваше внимание, что тег <link> размещается всегда внутри тега <head> (как правило, перед закрывающим тегом </head>).
Необходимое наименование шрифта и альтернативный вариант так же указывается в описании:
Рассмотрим пример подключения, выбранных нами шрифтов:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Пример подключение веб-шрифтов, используя тег <link></title>
<link href = 'https://fonts.googleapis.com/css?family=Roboto:400,700,400italic&subset=latin,cyrillic' rel = 'stylesheet' type = 'text/css'> /* подключаем внешнюю таблицу стилей для загрузки необходимых шрифтов, в HTML 5 type='text/css' допускается не указывать */
<style>
h3, p, b, i { /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family : "Roboto", sans-serif; /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif) */
}
</style>
</head>
<body>
<h3>Немного о верблюдах</h3>
<p><b>Верблюды</b> (<i>Camelus</i>) — род млекопитающих семейства верблюдовых (<i>Camelidae</i>) подотряда мозоленогих (<i>Camelidae</i>) отряда парнокопытных (<i>Artiodactyla</i>). Это крупные животные, приспособленные для жизни в засушливых регионах мира — пустынях, полупустынях и степях.</p>
</body>
</html>
Результат:
Рис.44 Пример подключение веб-шрифтов, используя тег <link>.
Второй вариант подключения, который мы также рассматривали в статье «Введение в CSS» это использование правила @import.
В отличие от первого метода (используя HTML тег <link>), который требует добавления кода к каждой странице Вашего сайта, правило @import допускается использовать в начале своей таблицы стилей, которая у Вас уже должна быть подключена к каждой странице.
Чтобы выполнить привязку к внешнему файлу CSS, нужно использовать url и заключить путь к CSS файлу в круглые скобки. Допустимо заключить содержимое в скобках в кавычки:
@import url("path/to/file.css");
Предлагаемый вариант импортирования на страницу:
Обращаю Ваше внимание, что правила @import всегда необходимо указывать перед стилями CSS, иначе, таблицы стилей не импортируются (браузеры просто их проигнорируют).
Вы можете использовать правило @import как во внешних таблицах стилей, так и во внутренних. Рассмотрим пример подключения, выбранных нами шрифтов, используя правило @import во внутренних таблицах стилей:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Пример подключение веб-шрифтов, используя правило @import</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,400italic&subset=latin,cyrillic); /* импортируем внешнюю таблицу стилей */
h3, p, b, i { /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family : "Roboto", sans-serif; /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif) */
}
</style>
</head>
<body>
<h3>Немного о пингвинах</h3>
<p><b>Пингвиновые</b> или <b>пингвины</b> (лат. <i>Spheniscidae</i>) — семейство нелетающих морских птиц, единственное в отряде <b>пингвинообразных</b> (<i>Sphenisciformes</i>). В семействе 18 современных видов. Все представители этого семейства хорошо плавают и ныряют.</p>
</body>
</html>
Результат нашего примера:
Рис.46 Пример подключение веб-шрифтов, используя правило @import.
Прошу Вас учесть тот момент, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь, тоже нужно скачать и проанализировать. Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.
Кроме того, в некоторых случаях правило @import может замедлять загрузку таблиц стилей, либо загружать их не в заданном порядке, что может быть критично для конечного отображения конкретной страницы. Не используйте его в своих проектах.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практические задания:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла) в любую папку на вашем жестком диске:
- Переходим на сайт службы Google Fonts и скачиваем необходимые нам шрифты:
для заголовка — Roboto, для остального текста — Open Sans. Обратите внимание, что Вам необходимо будет подключить один шрифт Roboto и три Open Sans к странице. В результате у Вас должно получиться следующее:Практическое задание № 10.
- Переходим на сайт службы Google Fonts, находим необходимый нам шрифт — Ubuntu, выбираем необходимые стили шрифта и языки, которые нам понадобятся. После этого с использованием тега <link> подключите шрифты на нашу страницу. В результате у Вас должно получиться следующее:
Практическое задание № 11.
Если у Вас возникают трудности при подключении шрифтов, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу примера, чтобы понять какой код CSS был использован.
Руководство по @font-face CSS3
Хотя @font-face поддерживается уже основными браузерами (IE, Firefox, Chrome, Opera и Safari), но все же не всеми, да и многие пользователи до сих пор используют устаревшие версии популярных браузеров. И когда браузер не поддерживает это свойство, ваши пользовательские шрифты могут нарушить макет или привести к нежелательным результатам. В этой статье объясняются общие проблемы при использовании пользовательских шрифтов, выбор резервных веб-безопасных шрифтов, и как создать идеальный резервный шрифт при помощи Modernizr.
Распространенная ошибка
Одна из распространенных ошибок — это то, что большинство людей не указывают, при использовании пользовательских шрифтов, резервные шрифты или выбирают неверные шрифты для запасного варианта.
Web-безопасные резервные шрифты
При использовании нестандартных шрифтов, важно подключить веб-безопасные шрифты в качестве запасного варианта. Резервный шрифт помогает сохранить ваш дизайн в надлежащем виде, когда @font-face не поддерживается или не доступен. Ключевым моментом для выбора резервных шрифтов является выбор веб-безопасных шрифтов, которые лучше всего соответствуют пользовательскому шрифту. Например, если Вы используете пользовательский шрифт Clarendon, то для него лучший резервный веб-безопасный шрифт — Georgia, потому что они оба относятся к семейству serif-шрифтов (шрифтов с засечками), и они имеют схожую ширину шрифта.
Проблемы компоновки
Так как каждый шрифт имеет свою собственную ширину, высоту, кернинг (межбуквенный интервал) и т.д., то некоторые шрифты не взаимозаменяемы с веб-безопасными шрифтами. Взгляните на пример ниже. Это сравнение Wire One (пользовательский шрифт) и Arial (веб-безопасный шрифт) с размером 36pt и буквами в верхнем регистре. Как видите, текст с шрифтом Arial занимает места более чем в два раза в сравнении с текстом Wire One , потому что Arial имеет большую ширину и кернинг.
Это может вызвать проблемы с шаблоном, так как показано на картинке ниже, где резервный шрифт выходит за границу блока.
Modernizr
К счастью, есть скрипт Modernizr, который может помочь решить проблему, о которой упоминалось выше. Modernizr — это Javascript, который определяет какие свойства CSS3 поддерживаются браузером. Затем он добавляет классы CSS в <html> элемент, указывающие какие свойства поддерживаются. Например, если @font-face не поддерживается, то он добавит класс no-fontface в <html> элемент (например, <html>). Эти CSS классы добавляются Javascript-ом, и они не видны в исходном коде. Для того, чтобы увидеть их, вам нужно проверить элемент страницы, например, при помощи Firebug или подобных ему инструментов.
Резервные шрифты с Modernizr (демо)
Итак, теперь мы можем использовать Modernizr, чтобы определить поддерживается ли @font-face, а затем предоставить соответствующий резервный шрифт. Например, вы можете настроить стили для резервного шрифта (size, letter-space, weight, text-transform и т.д.) для лучшего соответствия пользовательскому шрифту.
Подключение Modernizr
Чтобы использовать Modernizr, вам необходимо скачать копию Modernizr и подключить его в Вашем HTML-документе.
<script src=»js/modernizr.js»></script>
.no-fontface CSS
Затем вам необходимо создать дополнительные правила для класса .no-fontface. Посмотрите этот пример, чтобы увидеть конечный результат.
/* wire one font */
h2 {
font-family: ‘Wire One’, arial, serif;
font-weight: bold;
font-size: 48px;
letter-spacing: 1px;
text-transform: uppercase;
}
/* no-faceface fallback */
.no-fontface h2 {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 30px;
letter-spacing: 0;
text-transform: none;
}
Перевод
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом
Как задать шрифт в html – начертание, стиль, размер и многое другое
От автора: приветствуем вас на страницах блога Webformyself. В этой статье я хотел бы ответить на вопрос, как задать шрифт в html. Кое-кто все еще делает это неправильным образом, поэтому очень важно разобраться с вопросом более тщательно.
Как задавали шрифт раньше
Ранее в html использовался специальный парный тег font, который выступил как контейнер для изменения параметров шрифта, таких, как гарнитура, цвет и размер. Сегодня такой подход является в корне неверным. Почему? Веб-стандарты определяют, что внешний вид страницы не должен прописываться в html-разметке. К тому же, тег поддерживается полноценно только в очень старой версии HTML – HTML 3.
Задание шрифта в html правильным образом
Сегодня для этой цели стоит использовать исключительно возможности css. Этот язык как раз и создан для того, чтобы определять через него внешний вид. К тому же в css намного больше свойств, которые влияют на внешний вид текста. Рассмотрим понемногу каждое из них:
Font-style. Определяет начертание текста. Принимает такие значения:
Normal – обычное.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Italic – курсив.
Oblique – наклонный текст. Он немного отличается от курсива, буквы склоняются немного вправо.
Font-variant. Свойство назначает, как нужно интерпретировать написание строчных букв. Имеет всего два значения:
Normal – обычное поведение.
Small-caps – все строчные буквы преобразовываются в заглавные, а их размер немного уменьшается по сравнению с обычным шрифтом.
Font-weight. Определяет жирность текста. Значение можно задавать ключевыми словами или числовым значением. Давайте рассмотрим все варианты:
Normal – обычный текст
Bold – текст с жирным начертанием
Bolder – будет выводиться жирнее, чем он выводится у родительского элемента.
Lighter – буквы получат меньше жирности, по сравнению с родителем.
Вот так все просто. Кроме этого, есть возможность задавать значение в виде чисел от 100 до 900, где 900 – самый жирный. К примеру, значению normal соответствует 400, а bold – 700.
К сожалению, большинство браузеров не распознают этих числовых значений и могут применять всего два значения – normal и bold. Для эксперимента я создал 9 абзацев и задал каждому разную жирность текста – от 100 до 900. Потом открыл эту веб-страничку в разных браузерах и ни один не отобразил разные начертания. Вывод: лучше не применяйте числовые значения.
Font-size. Это свойство задает размер букв. Размер можно задавать в различных относительных и абсолютных величинах. Чаще всего размер задается в пикселах, относительных единицах em и процентах. Если вы хотите подробнее ознакомиться с заданием размера в css, то почитайте эту статью, где все описано более подробно.
Font-family. Пожалуй, самое основное свойство, которое определяет семейство или конкретное имя используемого шрифта. Если вы используете конкретное название, то нужно убедиться, что заданный шрифт найдется на компьютерах всех пользователей. Для надежности через запятую нужно прописать альтернативный вариант или целое семейство. Шрифты подразделяются на такие семейства:
Serif – с засечками
Sans-serif – без засечек, рекомендуется применять для основного текста.
Monospace – моноширинные, ширина каждой буквы одинакова, соответственно.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Cursive – курсивные.
Fantasy – необычные, декоративные.
Каждое семейство подходит под разные потребности. Например, с помощью fantasy часто оформляют различные заголовки, а monospace используются для вывода машинного кода и т.д. Конкретнее узнать названия шрифтов вы можете, например, в текстовом редакторе или в фотошопе.
Сокращенная запись
Все то, что мы рассмотрели выше, можно очень легко записать по сути в одну строчку с помощью замечательного свойства font, которое собирает вместе все настройки. Записывать нужно в такой последовательности:
Font: font-style | font-variant | font-weight | font-size | font-family;
Font: font-style | font-variant | font-weight | font-size | font-family; |
Если какой-то параметр вам указывать не нужно, то он просто опускается. Обязательными здесь являются только размер и семейство шрифта, все остальное указывать необязательно, если в этом нет необходимости. Использование сокращенной записи позволяет сильно сократить код в css. Пользуйтесь ею, потому что это хорошая оптимизация для работы сайта.
Как задать шрифт в html разным элементам
Так, что-то мы сильно увлеклись описанием всех свойств для шрифта. Это очень важная информация, но как вообще его правильно задавать? Используйте нужные селекторы, чтобы дотянуться до нужных элементов. Дальше я предлагаю несколько примеров:
p a{
font-family: Verdana, sans-serif;
}
p a{ font-family: Verdana, sans-serif; } |
Все ссылки в абзацах получат шрифт Verdana, а если браузер его не найдет, то будет использован другой из этого же семейства.
table{
font: normal small-caps bold 12px Arial;
}
table{ font: normal small-caps bold 12px Arial; } |
Для табличных данных задается много параметров шрифт: уменьшенные прописные буквы, жирное начертание, размер и название шрифта.
.header #logo{
font-family: fantasy;
}
.header #logo{ font-family: fantasy; } |
Элемент с идентификатором logo, находящийся в блоке с классом header, получает шрифт по умолчанию из семейства декоративных.
Таким образом, вам достаточно знать различные css-селекторы и вы сможете дотянуться до любого элемента на веб-странице и оформить для него свои стили. Не переусердствуйте, правила хорошего дизайна не допускают, чтобы на одном сайте использовалось не больше трех шрифтов. Лучше придерживаться этого принципа.
Итак, нам удалось рассмотреть все свойства для шрифтов, какие есть в css. Конечно, это не все эффекты, которые можно применить именно к тексту. Его можно повернуть, добавить ему тень или даже несколько теней, подчеркнуть, изменить цвет и т.д. Но все эти замечательные возможности реализуются другими свойствами, без приставки font.
Например, цвет можно определить с помощью свойства color. Об этом написана отдельная статья. Если вы до сегодняшнего дня думали, что в css можно выбрать только один из сотни цветов, то вы сильно заблуждались. Предлагаю вам прочитать статью и убедиться в том, что можно выбирать из миллионов оттенков.
Еще информация по работе с текстом вы можете найти в нашем премиум-разделе, где освещаются еще некоторые моменты.
А на этом я буду с вами прощаться, со шрифтами вроде немного разобрались. Не забывайте подписаться на блог, если еще не сделали этого, потому что здесь вас ждет много материалов по сайтостроению.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотреть
Вариативные шрифты • Про CSS
Вариативные (или настраиваемые) шрифты — это, без преувеличения, новая страница в веб-типографике. Настраиваемые шрифты стали возможны благодаря совместным усилиям компаний Microsoft, Apple, Adobe и Google. Концепция была впервые представлена в сентябре 2016 года, вместе с релизом OpenType 1.8. На самом деле, работы в этом направлении велись ещё в 90-х, но только широкое использование шрифтов в вебе дало этой идее вторую жизнь и бурное развитие.
На момент написания статьи вариативные шрифты уже достаточно хорошо поддерживаются приложениями (Photoshop, Illustrator) и браузерами (Chrome, Edge, Safari, в Firefox пока за флагом и только на MacOS), а кроме того, выложено несколько свободно распространяемых демо-версий, следовательно, уже можно заняться изучением возможностей таких шрифтов и подготовиться к их использованию в реальной жизни.
Вариативные шрифты — это расширение формата OpenType, которое позволяет хранить все варианты начертаний в одном файле, а для переключения между ними использовать не только фиксированные шаги, но и промежуточные значения. Например, вместо привычных значений жирности вроде 100, 400, 700 можно будет задать 75 или 650, и так же гибко можно настроить ширину символа от самого сжатого до самого широкого задав любое значение в предопределённом диапазоне, и всё это без загрузки дополнительных файлов:
Шрифт: KairosSans
Возможности нового формата решают сразу две проблемы: во-первых, снимаются ограничения на количество доступных начертаний: они больше не требуют отдельных файлов, а количество сочетаний ограничивается только настройками шрифта и фантазией разработчика. Во-вторых, для получения любого количества разных начертаний на страницу достаточно будет подключить всего один файл, что позволит сэкономить трафик и быстрее показывать страницы пользователю.
Настройками шрифта можно управлять с помощью CSS.
Высокоуровневые и низкоуровневые CSS-свойства
Низкоуровневые — это font-variation-settings и font-feature-settings. Их значения состоят из списка пар имён и значений, перечисленных через запятую.
Пример кода:
font-variation-settings: "wght" 1, "wdth" 200, "ital" 1, "opsz" 100;
font-feature-settings: "liga" on, "zero" on;Высокоуровневые — это, например, font-optical-sizing, font-variant-ligatures и font-variant-numeric.
Пример кода:
font-optical-sizing: 100;
font-variant-ligatures: common-ligatures;
font-variant-numeric: slashed-zero; Высокоуровневые свойства удобнее, но поддержка браузерами оставляет желать лучшего, в то время как низкоуровневыми уже вполне можно пользоваться.
Для каждого низкоуровневого свойства есть наборы предопределённых настроек, но при создании шрифта есть возможность добавить свои, что позволяет автору добавить в шрифт любое количество кастомных вариаций и фич.
Доступные настройки шрифта можно воспринимать как API: можно управлять только теми, которые предопределил разработчик. Если какие-то настройки не предусмотрены, ими управлять нельзя. Следовательно, чтобы полноценно пользоваться шрифтом, нужно точно знать какие возможности в нём есть. Для определения свойств шрифта удобно использовать вот эти сервисы:
- fontdrop.info — покажет все возможности шрифта и позволит поиграться с ними вживую. Не поддерживает WOFF2.
- wakamaifondue.com — покажет возможности, живые примеры и предложит CSS. Так как он пытается показать примеры для всех настроек шрифта, на шрифтах с кучей символов и настроек страница может ощутимо тормозить. Поддерживает WOFF2.
Для экспериментов можно воспользоваться шрифтами, выложенными в открытый доступ:
font-variation-settings
Спецификация
Свойство позволяет управлять вариациями шрифта, задавать как отрисовывается глиф (наклон, толщина линий, ширина символа). Исключение составляет ital, при котором могут заменяться глифы.
В значении свойства через запятую перечисляются названия вариаций и значения для них. Названия вариаций в кавычках, названия кастомных вариаций пишутся капсом.
Авторы шрифтов сами определяют диапазон доступных значений. Если задать непредусмотренное значение, оно округлится до ближайшего подходящего.
Значение по умолчанию: normal (шрифт выглядит как обычно, настройки не применяются).
Предопределённые вариации:
ital — курсив.
Пример кода:
font-variation-settings: "ital" 1;Демо:
Шрифт: FF Meta Variable
Так как в курсиве глифы выглядят иначе, плавный переход от одного к другому затруднителен, поэтому здесь можно только включить или выключить свойство, задав 1 или 0.
Также в этом демо можно увидеть как огругляются неподдерживаемые значения. Можно задать, например, "ital" 0.5, и оно приведётся к единице, а все меньшие значения — к нулю.
slnt — наклон.
Пример кода:
font-variation-settings: "slnt" 1;Демо:
Шрифт: KairosSans
По идее, slnt — это наклон, а не курсив, то есть глифы не меняются, но в некоторых шрифтах такое поведение демонстрирует ital. Для демо был выбран KairosSans, в котором ital ведёт себя как slnt.
В отличие от ital, наклон может изменяться плавно.
opsz — оптический размер.
Пример кода:
font-variation-settings: "optz" 10;Демо:
Шрифт: AmstelvarAlpha
Параметр управляет толщиной тонких линий, их отображение может быть критически важным для читабельности при малых размерах шрифта:
Здесь хорошо видно, что для обычного текста лучше задавать значение opsz поменьше, а для заголовков можно задать и побольше, потому что на крупных размерах шрифта тонкие линии будут видны в любом случае.
wdth — ширина
Пример кода:
font-variation-settings: "wdth" 150;Демо:
Шрифт: Gingham
В отличие от простой трансформации, при изменении ширины вертикальные линии сохраняют свою толщину, соотношения линий остаются прежними, и шрифт не выглядит искажённым:
Управление шириной глифа доступно во многих шрифтах.
wght — вес
Пример кода:
font-variation-settings: "wght" 900;Демо:
Шрифт: FF Meta Variable
Ещё одна настройка, которая встречается во многих шрифтах. Она позволяет не только обойтись одним файлом для любых вариантов жирности, но также гибко управлять её значением.
Полный список предопределённых вариаций можно найти в спецификации OpenType, там же есть подробное описание каждой из них.
Как уже упоминалось выше, при разработке шрифта авторам не обязательно ограничиваться только вариациями из спецификации, они могут добавлять свои, что позволяет делать много интересного.
Например, у шрифта Decovar есть целых 15 настроек, из которых только одна стандартная — управление весом линий, в итоге из одного шрифта можно извлечь огромное количество вариантов:
В этом случае каждый отдельный стиль текста может задаваться набором значений:
font-variation-settings: "BLDA" 913.8, "BLDB" 162.8, "SKLB" 1000;Обратите внимание, что названия кастомных меток пишутся капсом.
А у Slovic — всего одна настройка, но она позволяет плавно переключаться между предустановленными стилями:
Значения вариаций можно анимировать.
font-feature-settings
Спецификация
Эта настройка позволяет включить или выключить некоторые возможности шрифта, например, лигатуры или отображение цифр в старом стиле:
Фичи из демо:
liga— лигатуры (когда для удобочитаемости два символа отображаются как один)smcp— отображение строчных как маленьких заглавныхfrac— отображение дробейonum— цифры в старом стилеzero— перечеркнутый ноль
Если фичу нужно включить, достаточно её имени, например:
font-feature-settings: "smcp", "onum";Хотя запись типа "smcp" on помогает лучше понять что происходит в коде.
Если же нужно выключить, обязательно добавлять off:
font-feature-settings: "smcp" off, "onum" off;Некоторые фичи включены по умолчанию, например, разные виды лигатур: clig, liga и rlig. Подробнее можно почитать в спецификации.
Здесь приведено лишь небольшое количество возможностей, полный список с подробными описаниями есть в спецификации OpenType.
Много примеров с кодом можно найти здесь: OpenType features in CSS.
Как уже говорилось выше, font-feature-settings — это низкоуровневая настройка. Спецификация рекомендует, по возможности, использовать высокоуровневые варианты, например:
Больше вариантов можно найти в разделе спецификации Font Feature Properties.
font-feature-settings может использоваться для получения более или менее радикального варианта шрифта:
Ещё интереснее распорядился фичами автор шрифта dT Jakob Variable Concept: он сделал не только вариативный шрифт, но и слоёный, и стиль для каждого из слоёв включается с помощью лигатур:
Не уверена, что это правильное использование лигатур, но вариант, безусловно, интересный.
Использование в реальной жизни
В данный момент не все браузеры поддерживают управление вариативными шрифтами, поэтому помимо настраиваемого шрифта на страницу придётся подключать обычные. Это предлагается делать следующим образом:
@font-face {
font-family: 'MyFontVariable';
src: url('source-sans-variable.woff2') format('woff2');
font-weight: 1 999;
}
@font-face {
font-family: 'MyFont';
src: url('source-sans-regular.woff2') format('woff2'),
url('source-sans-regular.woff') format('woff');
font-weight: 400;
}
@font-face {
font-family: 'MyFont';
src: url('source-sans-black.woff2') format('woff2'),
url('source-sans-black.woff') format('woff');
font-weight: 900;
}Затем с помощью @supports определяется поддержка настроек браузерами и задаётся нужный шрифт:
html {
font-family: 'MyFont', sans-serif;
}
@supports (font-variation-settings: normal) {
html {
font-family: 'MyFontVariable', sans-serif;
}
}Настраиваемые шрифты — тема богатая, и заниматься ею можно до бесконечности. По моим ощущениям, описанные в статье вопросы — только верхушка айсберга.
Я совсем недавно начала погружаться в тему, так что могла допустить ошибки и неточности. Сообщите мне о них, пожалуйста, если найдутся.
Подключение шрифтов кириллицы в шаблонах blogger
Статья о том, как в блоге исправить отображение кириллических шрифтов, если был использован шаблон, поддерживающий только шрифты с латиницей.
Зачастую шаблоны для blogger представлены на англоязычных сайтах, поэтому и шрифты в них подключены с латиницей. Если использовать такой шаблон в блоге, где информация представлена на русском языке, то шрифты отображаются не правильно. Вот пример, где первая часть строки написана шрифтом Times, а часть, выделенная желтым цветом — Lato:
Шрифт Lato вообще не поддерживает кириллицу и точного аналога среди Google Fonts ему найти не удалось, поэтому придется использовать другой шрифт.
Подключение шрифта Open Sans
Самым подходящим для основного текста страниц я нахожу шрифт Open Sans. У этого шрифта в наборе есть как латиница, так кириллица, нужно просто правильно подключить этот шрифт.
Для начала открываем HTML код шаблона (Шаблон — Изменить HTML), делаем поиск строки fonts.googleapis.com и смотрим, какие вообще шрифты используются в шаблоне (сейчас я делаю блог с использованием шаблона Voux Slider Blogger Template, который можно скачать отсюда: https://gooyaabitemplates.com/voux-slider-blogger-template/). В этом шаблоне используются разные шрифты:
Для начала заменим шрифт Lato на Open Sans, а потом похожие действия проделаем с остальными шрифтами. Возможно для заголовков получится найти другой интересный шрифт с поддержкой кириллицы.
Итак, в коде HTML вместо последней строки подключения шрифта Lato пишем такой код:
<link href=’http://fonts.googleapis.com/css?family=Open+Sans%3A300%2C400%2C700%2C400italic&subset=latin,cyrillic’ media=’all’ rel=’stylesheet’ type=’text/css’/>
После этого делаем замену «Lato» на «Sans Open» по всему шаблону:
font-family:»Lato»;
меняем на
font-family:»Open Sans»;
Если есть еще какие-то строки, относящиеся к шрифтам, то в них тоже делаем замену. Например, в этом шаблоне еще были строки наподобие этой:
<Variable name=»body.font» description=»Font» type=»font» default=»normal normal 14px Lato» value=»normal normal 14px Lato»/>
Сохраняем шаблон, перегружаем сайт и смотрим результат. Теперь текст должен выглядеть нормально:
Подключение шрифта Ubuntu
Кроме основного текста проблемы есть еще в заголовках сообщений:
Здесь используется шрифт Montserrat, я вместо него хочу использовать Ubuntu. Для этого меняю строку:
<link href=’http://fonts.googleapis.com/css?family=Montserrat%3A400%2C700&ver=4.2.4′ media=’all’ rel=’stylesheet’ type=’text/css’/>
на следующую:
<link href=’http://fonts.googleapis.com/css?family=Ubuntu%3A400%2C700&subset=latin,cyrillic’ media=’all’ rel=’stylesheet’ type=’text/css’/>
Кроме этого соответственно делаю соответствующие замены по всему шаблону — вместо Montserrat везде должно быть Ubuntu.
Кстати, у нового шрифта нужно проверить какие типы начертания доступны (bold 400, bold 700, italic). Подбор шрифтов и изучение всех характеристик удобно делать на странице Google Fonts: https://www.google.com/fonts/
Итак, сохраняем шаблон и проверяем результат:
Замена шрифту Raleway
Еще одна проблема есть в заголовках виджетов:
Здесь я попробую использовать шрифт Neucha вместо Raleway. В принципе можно использовать тоже Ubuntu или даже Open Sans, чем меньше разных шрифтов на сайте, тем лучше, но все-таки оставлю простор для творчества. Если останется третий шрифт, то потом при желании легче будет делать замену по всему шаблону.
В коде смотрю как именно подключается этот шрифт:
<link href=’http://fonts.googleapis.com/css?family=Bad+Script|Raleway:400,500,600,700,300|Lora:400′ rel=’stylesheet’ type=’text/css’/>
Меняю эту строку на такую:
<link href=’http://fonts.googleapis.com/css?family=Neucha:400&subset=latin,cyrillic’ rel=’stylesheet’ type=’text/css’/>
А далее по всему шаблону делаю замену Raleway на Ubuntu:
font-family: Ubuntu;
Кстати, в шаблоне был подключен еще один шрифт — Domine:
<link href=’http://fonts.googleapis.com/css?family=Domine%3A400%2C700&ver=4.2.4′ media=’all’ rel=’stylesheet’ type=’text/css’/>
но этот шрифт нигде не используется, поэтому эту строку просто удаляю.
Все, сохраняем шаблон и смотрим результат. Теперь все выглядит прекрасно.
Руководство по Google Font API
Несмотря на зарождающиеся технологии и веб-стартапы в Интернете, в недавнем прошлом нам не хватало богатой и красивой веб-типографики.
Хотя у нас так много шрифтов на выбор, мы могли использовать только определенный набор обычных шрифтов, установленных и поддерживаемых большинством компьютеров — эти шрифты в совокупности были известны как веб-безопасные шрифты .
Введите API шрифтов Google
Компания Google представила каталог шрифтов Google и API шрифтов Google, бесплатную веб-службу, которая позволяет владельцам веб-сайтов легко, удобно и эффективно использовать другие шрифты, помимо веб-безопасных шрифтов.Таким образом, веб-разработчики и авторы теперь могут использовать кодирование CSS @ font-face, чтобы использовать каталог шрифтов и API Google для доступа к высококачественным шрифтам.
Google Font API — это новый элемент в нише Font-as-Service, в которую входят TypeKit, Typotheque и другие.
Итак, давайте немного углубимся и обсудим Google Font API.
Что такое Google Font API?
Хорошо, вы много путешествуете по Интернету, но видели ли вы много нестандартных шрифтов, используемых на веб-сайтах или в блогах?
Давайте определим нестандартные шрифты как означающие что угодно, кроме веб-безопасных шрифтов, таких как Arial, Helvetica, Verdana, Georgia и Times New Roman.
Вне сайтов и блогов, ориентированных на дизайн (например, в основной сети), вероятно, немного.
Google Font API — это веб-сервис, который поддерживает высококачественные файлы шрифтов с открытым исходным кодом, которые можно легко использовать в ваших веб-дизайнах.
Мы надеемся, что коллекция шрифтов будет продолжать расти, чтобы дать вам возможность выбирать гораздо больше типов шрифтов.
Преимущества использования Google Font API
Если вы решите использовать Google Font API, вот некоторые из преимуществ, которыми вы сможете воспользоваться:
Продолжайте использовать текст HTML
В отличие от использования изображений или замены CSS-background-image, использование @ font-face в качестве решения для улучшения веб-типографики более благоприятно для SEO.
Кроме того, это ненавязчивое решение, означающее, что вам не нужно изменять какой-либо существующий контент — вы просто обновляете свои таблицы стилей CSS.
Доступен в Интернете
Поскольку вы используете текст HTML, а не изображение или фон CSS, это не влияет на людей, использующих программы чтения с экрана.
Инфраструктура с высоким временем безотказной работы и сокращение обязанностей вашего веб-сервера
Offloahttps: //www.webfx.com/blog/web-design/website-features-that-you-can-easily-offload/ Если ваш @ font-face нуждается в надежной инфраструктуре Google, вы можете быть уверены того факта, что обслуживание файлов шрифтов будет быстрым, и что вы снимаете нагрузку с вашего собственного сервера.
Как использовать Google Font API
Чтобы использовать Google Font API, не нужно быть заядлым веб-разработчиком. Чтобы использовать Google Font API, все, что вам нужно сделать, это добавить один элемент link таблицы стилей на свои веб-страницы, а затем вы можете начать использовать этот шрифт в своем CSS.
Вот обобщенный процесс использования Google Font API:
Шаг 1. Добавьте ссылку на таблицу стилей с предпочитаемым шрифтом
Найдите в коллекции шрифтов Google, какие шрифты можно использовать.Основной формат для включения определенного шрифта на ваш собственный веб-сайт:
">
Шаг 2. Используйте шрифт для стилизации HTML-элементов
В приведенном ниже примере вы назначаете своим элементам
шрифт с именем Font Name с помощью атрибута CSS font-family .
h2 {
семейство шрифтов: «Название шрифта», с засечками;
} Если вам нужен шрифт только для одноразового использования, вы можете объявить свой стиль встроенным.
Шесть редакций прекрасны
Шаг 3. Всегда имейте резервный план
Вы могли заметить в приведенных выше примерах кода, что я использовал serif в качестве резервного шрифта. Это сделано, чтобы избежать неожиданного поведения. Это означает, что если что-то пойдет не так с серверами Google, браузер может использовать шрифт Serif по умолчанию. Сделайте это практикой при использовании атрибута font-family , независимо от того, используете ли вы @ font-face или нет — такая практика называется стеком шрифтов.
Пример использования Google Font API
Вот пример. Скопируйте и вставьте следующий блок кода в документ HTML, сохраните его, а затем откройте в своем веб-браузере.
Я предлагаю протестировать ваш HTML-документ в различных браузерах, чтобы вы могли увидеть различия между браузерами (или их отсутствие).
Вы можете поэкспериментировать с другим типом шрифта, но в этом примере я использовал шрифт Lobster.
href = "http: // fonts.googleapis.com/css?family=Lobster ">
<стиль>
h2 {
семейство шрифтов: «Лобстер», с засечками;
размер шрифта: 48 пикселей;
}
Шесть редакций - это прекрасно!
Результат:
Скриншот вышеуказанного блока кода через Google Chrome 4.1
Сгенерированный текст («Шесть редакций прекрасны!») Является обычным текстом HTML, поэтому вы можете добавить больше стилей в свой элемент стиля, если хотите (в нашем примере мы используем только один элемент: h2 ).
Запрос нескольких шрифтов с помощью Google Font API
Допустим, вам нужно три шрифта из каталога шрифтов Google. Не создавайте несколько запросов . Множественные запросы увеличивают количество HTTP-запросов, которые делает веб-страница. Чем меньше HTTP-запросов вы сделаете, тем лучше будет время отклика веб-страницы.
Вместо нескольких тегов link таблицы стилей используйте следующий формат для свойства href тега link вашей таблицы стилей.
В следующем примере URL-запроса загружаются все три шрифта (Vollkorn, Yanone и Droid Sans) за один запрос.
Vollkorn | Yanone | Дроид + Санс
Теперь вы можете использовать любой из этих трех шрифтов в своих элементах стиля.
Интересные факты
Названия шрифтов разделяются символом | без пробелов между ними. Обратите внимание на использование + в шрифте Droid Sans. Используйте знак + в названиях шрифтов, в которых есть пробелы.В нашем случае название шрифта — Droid Sans, поэтому в ссылке запроса мы использовали Droid + Sans .
Совет: Использование слишком большого количества шрифтов в одном запросе может замедлить время отклика страницы. Так что загружайте только нужные шрифты. Будьте консервативны: просто потому, что это бесплатно, не значит, что вы должны сходить с ума от @ font-face .
Вес и стиль шрифта для шрифтов Google Font API
У веб-шрифтов также есть вариации веса / стиля шрифта. Чтобы использовать эти варианты, добавьте двоеточие (: ) к имени шрифта, а затем стили и веса.
В приведенном ниже примере мы запрашиваем вариант Vollkorn жирным шрифтом и курсивом, а Inconsolata — вариант курсивом.
http://fonts.googleapis.com/css?family=Vollkorn: полужирный , полужирный | Inconsolata: курсив | Droid + Sans
Есть также шорткоды для вариаций каждого шрифта. Их:
- Полужирный: b
- Курсив: i
- Полужирный курсив: bi
Вот пример использования коротких кодов:
http: // шрифты.googleapis.com/css?family=Vollkorn: b , bi | Inconsolata: i | Droid + Sans
Интересные факты
Используйте двоеточие (: ) после названия шрифта без пробелов между ними, за которым следует название варианта (например, полужирным шрифтом ) или короткий код названия варианта (например, bi ). Если вам нужно несколько вариантов шрифта для одного шрифта, разделите их запятой (, ) без пробелов между ними.
Google Font API обеспечивает более красивую веб-типографику
Индустрия веб-дизайна гудит в поисках решения давней проблемы ограничений шрифтов в Интернете. Вы уже используете @ font-face ? Если вы еще не используете его, почему бы и нет? Делитесь своими мыслями и мнениями в комментариях.
Связанное содержимое
Основные функции: Оптимизация шрифтов | Next.js
Начиная с версии 10.2 , Next.js имеет встроенную оптимизацию веб-шрифтов.
По умолчанию Next.js автоматически встраивает CSS шрифтов во время сборки, устраняя лишний круговой обход для получения объявлений шрифтов. Это приводит к улучшениям в First Contentful Paint (FCP) и Largest Contentful Paint (LCP).Например:
<ссылка
href = "https://fonts.googleapis.com/css2?family=Inter"
rel = "таблица стилей"
/>
Чтобы добавить веб-шрифт в приложение Next.js, переопределите next / head . Например, вы можете добавить шрифт на определенную страницу:
импортировать заголовок из 'next / head'
экспортировать функцию по умолчанию IndexPage () {
возвращение (
<Голова>
<ссылка
href = "https: // шрифты.googleapis.com/css2?family=Inter&display=optional "
rel = "таблица стилей"
/>
Привет, мир!
)
}
или для всего приложения с помощью Custom Document .
импортировать документ, {Html, Head, Main, NextScript} из 'next / document'
class MyDocument extends Document {
оказывать() {
возвращение (
<Голова>
<ссылка
href = "https: // шрифты.googleapis.com/css2?family=Inter&display=optional "
rel = "таблица стилей"
/>
<Главная />