Шрифты Google, применяющие font-weigh:800, когда не импортируют его

Я импортирую размер 300 и 400 в соответствии со следующим:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400" media="all">

Тем не менее, я все еще могу применить font-weight: 800, и это выглядит иначе, чем font-weight:400 Почему? откуда оно берется?

Воспроизведение: https://jsfiddle.net/7164fk3j/

Даже когда я импортирую только шрифт 300:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:300" media="all">

Воспроизведение: https://jsfiddle.net/7164fk3j/1/

Как это работает? Это просто выделение жирным шрифтом 300?


person Alvaro    schedule 24.11.2017    source источник


Ответы (1)


Резервные веса

font-weight использует резервные веса на основе следующего алгоритма:

Если указанный точный вес недоступен, то для определения фактически отображаемого веса используется следующая эвристика:

  • Если указан вес больше 500, используется ближайший доступный более тяжелый вес (или, если его нет, ближайший доступный более легкий вес).

  • Если указан вес меньше 400, используется ближайший доступный более легкий вес (или, если его нет, ближайший доступный более тяжелый
    вес).

  • Если указан вес ровно 400, то используется 500. Если 500 недоступно, используется эвристика для веса шрифта менее 400.

  • Если указан вес ровно 500, то используется 400. Если 400 недоступно, то используется эвристика для веса шрифта менее 400.

Источник

Синтез

Это объясняет, как браузер сопоставляет веса, но откуда он берет настоящую полужирную версию?

Существует свойство CSS под названием font-synthesis, которое обеспечивает контроль над тем, как/когда браузер синтезирует аспекты шрифтов (жирность, стили), которые отсутствуют.

Свойство CSS шрифта-синтеза определяет, какие отсутствующие шрифты, полужирный или курсив, могут быть синтезированы браузером.

Это свойство не реализовано во многих браузерах, но его наличие предполагает, что браузер синтезирует полужирный вариант, когда он отсутствует (и что когда-нибудь это свойство даст нам контроль над ним).

Источник

Источник синтеза

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

Импортировано только 300 весов: введите здесь описание изображения

С импортированным весом 300 и 400: введите здесь описание изображения

Импортировано весов 300, 400 и 800: введите здесь описание изображения

person Tim Medora    schedule 24.11.2017