Типовые решения в вёрстке
Подключение шрифтов
Типовые решения в вёрстке
Подключение шрифтов
Разберём способы подключения шрифтов к страницам, а заодно настроим шрифт на странице с шапкой сайта из предыдущего совета.
Есть три способа подключения шрифтов:
Использование шрифтов, имеющихся у пользователя локально.
Подключение шрифтов со стороннего сайта.
Подключение шрифтов вручную.
Использование шрифтов, имеющихся у пользователя локально
Браузер выбирает шрифт для страницы из установленных на компьютере пользователя. На разных операционных системах предустановлены разные шрифты, поэтому придётся перечислить и учесть их все.
Например, Бутстрап использует этот подход по умолчанию:
$font-family-sans-serif:
// Safari for macOS and iOS (San Francisco)
-apple-system,
// Chrome < 56 for macOS (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
"Roboto",
// Basic web fallback
"Helvetica Neue", Arial, sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
Конечно, этот вариант не подойдёт, если вы хотите использовать какие‑то определённые шрифты на своём сайте.
Подключение шрифтов со стороннего сайта
Один из самых популярных ресурсов с бесплатными шрифтами — Гугль‑фонтс. Шрифты можно подключить через link
за пять минут.
Выбираем шрифт, копируем код:
Вставляем его в head
страницы:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Заголовок</title>
<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
</head>
<body>
</body>
</html>
И используем в ЦСС:
font-family: 'Rubik', sans-serif;
Если перейти по ссылке, указанной в link
, мы увидим, что сервис просто возвращает набор ЦСС‑правил, которые встраиваются браузером в код страницы как стили:
/* cyrillic */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Rubik'), local('Rubik-Regular'), url(https://fonts.gstatic.com/s/rubik/v9/iJWKBXyIfDnIV7nFrXyw023e1Ik.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Rubik'), local('Rubik-Regular'), url(https://fonts.gstatic.com/s/rubik/v9/iJWKBXyIfDnIV7nDrXyw023e1Ik.woff2) format('woff2');
unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Rubik'), local('Rubik-Regular'), url(https://fonts.gstatic.com/s/rubik/v9/iJWKBXyIfDnIV7nPrXyw023e1Ik.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Rubik'), local('Rubik-Regular'), url(https://fonts.gstatic.com/s/rubik/v9/iJWKBXyIfDnIV7nBrXyw023e.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
То же самое мы можем сделать вручную со своими шрифтами. Главное — иметь исходники необходимых шрифтов.
Подключение шрифтов вручную
Для подключения шрифтов используется специальное ЦСС‑правило @font-face
, которое мы видели в примере выше. Его нужно вставить в ЦСС‑файл на верхнем уровне:
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(<путь к шрифту>) format('woff');
}
В параметре src
можно указать сразу несколько источников. Браузер по очереди пройдётся по ним и выберет первый подходящий, например:
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(./fonts/Rubik-regular.woff2) format('woff2'),
url(./fonts/Rubik-regular.woff) format('woff'),
url(./fonts/Rubik-regular.ttf) format('truetype'),
url(./fonts/Rubik-regular.otf) format('opentype');
}
В url
нужно указать относительный путь к файлу со шрифтом или адрес удалённого ресурса. Дополнительно можно указать формат файла, чтобы дать браузеру подсказку, стоит ли его использовать.
url
Функцию local
можно использовать, чтобы браузер поискал шрифт на машине пользователя и в случае успеха использовал его. Подходы можно комбинировать:
url
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Rubik'),
url(./fonts/Rubik-regular.woff2) format('woff2'),
url(./fonts/Rubik-regular.woff) format('woff'),
url(./fonts/Rubik-regular.ttf) format('truetype'),
url(./fonts/Rubik-regular.otf) format('opentype');
}
Самый продвинутый формат шрифтов на сегодня — WOFF 2.0. Он разработан специально для веба и содержит внутри себя TTF или OTF, но с компрессией. WOFF 1.0 имеет меньшую компрессию, но поддерживается бо́льшим количеством браузеров.
Любой шрифт можно конвертировать в другой формат через какой‑нибудь сервис. Я обычно использую Font Squirrel. В нём можно настроить набор символов, высоту строки, конвертировать шрифт в другие форматы и многое другое:
Настройка шрифта в шапке с меню
Теперь доведём до ума нашу шапку с меню. Мы остановились на таком результате:
Подключим шрифт в формате WOFF 2.0 (32 КБ) и укажем WOFF 1.0 (43 КБ), как запасной вариант:
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(./fonts/rubik-regular.woff2) format('woff2'),
url(./fonts/rubik-regular.woff) format('woff');
}
В макете мы используем Arial, но для наглядности поставим основным шрифтом Rubik, а Arial запасным:
body {
font-family: Rubik, Arial, sans-serif;
}
Получается так:
Осталось поправить лишний правый отступ у плашки активного пункта меню, который появился из‑за letter-spacing
. Вычитаем его из правого поля плашки:
.menu .active {
padding-right: calc(10px - .27em);
color: #fff;
background-color: #ff3d00;
border-radius: 8px;
}
Теперь порядок:
Итоговый результат можно посмотреть в Кодсэндбоксе.
В следующем совете мы сделаем обёртку для страницы, ограничим ширину и добавим отступы слева и справа.