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.

EM или REM? 6 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1




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

На основе ролика о распознавании инсульта создан плакат. Вторая часть 1 1 Как вы верифицируете оценку сроков от сотрудника? 1 Как попросить клиента помочь с дебагом? 1