В чем разница между переменными шрифтами и обычными шрифтами

Question

Я читал о переменных шрифтах, и я не понимаю концепции.

Существует 5 зарегистрированных осей wth, wdth, ital, slnt, opsz. Вес шрифта уже существовал, и мы ежедневно используем его в нашем css.

Так в чем же разница между переменным шрифтом и обычным шрифтом?

Кроме того, если я поставлю диапазон font-weight: 100 500 и затем использую font-weight: 600 в <p> элементах, я не вижу никакой разницы.

Вес 600 продолжает работать, хотя я ограничил его до 500.

@font-face {
  font-family: "sketch_3dregular";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/IBMPlexSansVar-Roman.woff2")
    format("woff2 supports variations"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/IBMPlexSansVar-Roman.woff2")
    format("woff2-variations");
  font-weight: 100 500;
  font-stretch: 85% 100%;
}

html {
  font-size: 10px;
  margin: 0;
  font-family: "sketch_3dregular";
}

p {
  font-size: 1.4rem;
  line-height: 1.6;
  word-spacing: 0.6rem;
  font-weight: 600;
}

Answer 1

Основное различие между переменными шрифтами и обычными шрифтами состоит в том, что переменные шрифты представляют собой отдельный файл . Этот файл содержит каждый вес. Однако для обычных шрифтов у каждого веса есть свой файл.

Кроме того, переменные шрифты могут быть установлены на любой вес под солнцем . Шутки в сторону; в то время как обычные шрифты ограничены такими весами, как «светлый», «обычный» и «жирный», переменные шрифты могут быть установлены на произвольные весовые коэффициенты, такие как 375 и 458, вплоть до 1000.

Большое значение имеет наличие переменного веса анимация . Вы можете анимировать вес шрифта, создавая интересные эффекты. Посмотрите this CodePen для отличного примера.

Наконец, переменные шрифты могут иметь другие переменные, кроме веса. Проверьте https://v-fonts.com, и вы увидите шрифты с переменной шириной, уклоном и т. Д.

Для получения дополнительной информации я бы рекомендовал прочитать эту статью из MDN.

Answer 2

Шрифты имеют данные контура глифа. Если у вас есть обычные шрифты для «обычного» и «полужирного» шрифта, то каждый из них имеет отдельные контуры. Но в переменном шрифте есть один набор контуров плюс дополнительные «дельта-данные» , в которых конструктор шрифтов описывает, как контур можно варьировать в пространстве вариантов дизайна одной или нескольких осей. Дельта-данные обеспечивают максимальное изменение вдоль оси, и в итоге вы получаете континуум от исходного контура до максимальной модификации, и можно выбрать любое изменение вдоль этого континуума.

Итак, переменная может быть описана как целое семейство шрифтов в одном файле, но это даже больше, чем это, так как это семейство теперь включает в себя все небольшие, инкрементные изменения по всем поддерживаемым осям - так что это не просто семейство со «светлыми», «обычными» и «жирный», но и непрерывный диапазон возможностей между ними.

Анимация была упомянута в качестве возможного использования. Но еще более значимым для веб-разработчиков является доступ к большей палитре типографики c и небольшим / небольшим файлам для загрузки.

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

Если вы хотите понять технические подробности о том, как работает переменный формат шрифта, здесь есть обзорная глава в OpenType spe c, здесь .

The Руководство по MDN также отлично.

Что касается заданного вами c вопроса о том, чтобы объявить диапазон font-weight: 100 500, а затем использовать font-weight: 600, но не увидеть ничего другого, любое значение выходит за заявленный диапазон будет недействительным, и UA будет использовать ближайшее действительное значение. Так что в вашем примере font-weight: 600 должен дать тот же результат, что и font-weight: 500.