x
 
Юрий Мазурский
2 апреля 2020
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Типовые решения в вёрстке

Раз­бе­рём спо­собы под­клю­че­ния шриф­тов к стра­ни­цам, а заодно настроим шрифт на стра­нице с шап­кой сайта из преды­ду­щего совета.

Типовые решения в вёрстке

Есть три спо­соба под­клю­че­ния шрифтов:

  1. Исполь­зо­ва­ние шриф­тов, име­ю­щихся у поль­зо­ва­теля локально.

  2. Под­клю­че­ние шриф­тов со сто­рон­него сайта.

  3. Под­клю­че­ние шриф­тов вручную.

Использование шрифтов, имеющихся у пользователя локально

Бра­у­зер выби­рает шрифт для стра­ницы из уста­нов­лен­ных на ком­пью­тере поль­зо­ва­теля. На раз­ных опе­ра­ци­он­ных систе­мах пред­уста­нов­лены раз­ные шрифты, поэтому при­дётся пере­чис­лить и учесть их все.

Бутстрап — ЦСС‑фреймворк с набором готовых инструментов для быстрой вёрстки страниц

Напри­мер, Бут­страп исполь­зует этот под­ход по умолчанию:

Бутстрап — ЦСС‑фреймворк с набором готовых инструментов для быстрой вёрстки страниц
$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;
Бра­у­зер будет пере­би­рать шрифты по порядку, пока не най­дёт суще­ству­ю­щий в системе поль­зо­ва­теля. На Мак ОС это будет шрифт San Francisco, на Вин­до­усе — Segoe UI. Если не най­дётся ничего из пере­чис­лен­ного, то будет выбран шрифт без засе­чек, уста­нов­лен­ный в бра­у­зере по умол­ча­нию

Конечно, этот вари­ант не подой­дёт, если вы хотите исполь­зо­вать какие‑то опре­де­лён­ные шрифты на своём сайте.

Подключение шрифтов со стороннего сайта

Один из самых попу­ляр­ных ресур­сов с бес­плат­ными шриф­тами — Гугль‑фонтс. Шрифты можно под­клю­чить через 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');
}
Бра­у­зер сна­чала про­ве­рит, есть ли у поль­зо­ва­теля шрифт Rubik локально. Если нет, ска­чает его в под­хо­дя­щем фор­мате

Самый про­дви­ну­тый фор­мат шриф­тов на сегодня — 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;
}

Теперь порядок:

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

В сле­ду­ю­щем совете мы сде­лаем обёртку для стра­ницы, огра­ни­чим ширину и доба­вим отступы слева и справа.

Что ещё почитать

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Igor Pnev
4 апреля 2020

Стоит упомянуть про preload шрифтов через ХТМЛ:
<link rel="preload" href="/fonts/font.woff2" as="font" crossorigin="anonymous">
Это позволит браузеру ещё до парсинга ЦСС загрузить шрифты, и они мгновенно отобразятся после парсинга ЦСС.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Что делать, если меня, технического директора, потихоньку отстраняют от дел? Типовые решения в вёрстке. Почему не стоит использовать float 2 3 Как написать аккуратный код? Часть третья: заменяемость




Недавно всплыло

Куда податься? 2 1 Что такое профессиональная этика? 5 Как избежать «эффекта Тильды»? 3