x
 
Фёдор
22 февраля 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Аня Данилова рассказывает в своих советах про вариативные шрифты. А можно ли их уже применять в вебе?


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

Один из плюсов вариативных шрифтов — вес. Например, каждое начертание шрифта Source Sans Pro весит от 35 до 87КБ. Вариативная версия весит 120КБ и содержит в себе все начертания. Используем это.

Вариативные шрифты подключаются так же как обычные и настраиваются с помощью свойства font-variation-settings:

Поддержка вариативных шрифтов
@font-face {
  font-family: 'Secret Font';
  src: url(files/fonts/secretfont-variable.woff2) format("woff2-variations");
}

.example {
  font-family: 'Secret Font';
  font-variation-settings: "wdth" 1000, "wght" 400;
  /* wdth задаёт ширину шрифта, а wght — вес */
}

.example h1 {
  font-variation-settings: "wght" 700;
}


Старые браузеры такого не понимают, поэтому для них определим набор обычных начертаний:

@font-face {
  font-family: 'Secret Font';
  src: url(files/fonts/secretfont-light.woff2) format("woff2");
  font-weight: 100;
}

@font-face {
  font-family: 'Secret Font';
  src: url(files/fonts/secretfont-200.woff2) format("woff2");
  font-weight: 200;
}

@font-face {
  font-family: 'Secret Font';
  src: url(files/fonts/secretfont-300.woff2) format("woff2");
  font-weight: 300;
}

@font-face {
  font-family: 'Secret Font';
  src: url(files/fonts/secretfont-regular.woff2) format("woff2");
  font-weight: 400;
}

/* и так далее */

А теперь совместим, спрятав новые правила от старых браузеров с помощью директивы @supports:


<!-- index.html -->
<div class="example">
  <h2>Вихревой электрон</h2>
  <p>Скрытый смысл, несмотря на внешние воздействия,
  изящно диссонирует контрапункт.</p>
</div>
/* style.css */
@font-face {
  font-family: 'Secret Font';
  src: url(secretfont-light.woff) format("woff");
  font-weight: 100;
}

/* ... */

@supports (font-variation-settings: "wght" 1) {
  @font-face {
    font-family: 'SecretFont Variable';
    src: url(secretfont-variable.woff2) format("woff2-variations");
  }
}

.example {
  font-family: 'Secret Font';
  font-size: 50px;
}

.example h2 {
  font-weight: bold;
}

@supports (font-variation-settings: "wght" 1) {
  .example {
    font-family: 'SecretFont Variable';
    font-variation-settings: "wght" 400;
  }

  .example h2 {
    font-weight: normal;
    font-variation-settings: "wght" 700;
  }
}

Вихревой электрон

Скрытый смысл, несмотря на внешние воздействия, изящно диссонирует контрапункт.

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

В
В
В
В
В
В
В
Вперёд
400
В Фаерфоксе, Эдже и Сафари в старых версия Мак ОС начертания переключаются скачками
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

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

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

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

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

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

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




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

Правдивость 4 Как сделать, чтобы публикация выделялась в ленте: композиция, исправление дефектов, цвет 1 1 3