шрифт с жирным шрифтом не распознается

Question

Я использую 2 @font-face в моем файле index.css с целью использования шрифта с обычным и жирным шрифтом в качестве шрифта по умолчанию во всем приложении:

index. css file:

body {
    padding: 0px;
    margin:0px;
    font-family: "LucidaGrande";
}


@font-face {
  font-family: 'LucidaGrande';
  src: local('LucidaGrande'), url(../assets/fonts/LucidaGrande.ttf) format('truetype');
}

@font-face {
  font-family: 'LucidaGrande';
  font-weight: 900;
  src: local('LucidaGrande'), url(../assets/fonts/LucidaGrandeBold.ttf) format('truetype');
} 

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

#presentation-text em{
    font-size: 35px;
    color: rgb(139, 59, 28);
    font-style: normal; 
    font-weight: 900;
  }

Однако 900, т.е. жирный вес не применяется, все еще регулярно.

Правильно ли я использую это?

Answer 1

Если вы используете @font-face, , никогда используйте local(...). Причина, по которой вы используете @font-face, заключается в том, чтобы вы управляли точно , какой ресурс шрифта загружается для какого (набора) свойств шрифта. Последнее, что вам нужно, это чтобы черный ящик ОС извлекал вам то, что it считает, что шрифт соответствует указанному вами имени. Даже если он действительно находит Lucida Grande для какого-то пользователя, нет никакой гарантии, что это будет та же самая версия, которую вы установили на своем компьютере для разработки.

Интересно, что на самом деле это имеет отношение к реальной проблеме: как вы написанное вами CSS прямо сейчас означает, что, поскольку у вас установлен шрифт локально, все, что следует за local(...), никогда даже не будет просматриваться браузером, подобно тому, что происходит при использовании font-family: serif, Times. Браузер знает, как решить первое, поэтому он немедленно останавливается: он уже нашел то, что ему нужно было найти.

Эффективно ваш текущий CSS, запущенный в браузере на вашем компьютере, говорит об этом, как Что касается браузера:

@font-face {
  font-family: 'LucidaGrande';
  src: local('LucidaGrande);
}

@font-face {
  font-family: 'LucidaGrande';
  font-weight: 900;
  src: local('LucidaGrande);
} 

Итак, вы загружаете одну и ту же вещь в обоих объявлениях. Поскольку CSS весовые коэффициенты для формирователя текста в браузере полностью независимы от системного механизма обработки текста, в результате получается именно то, что вы видите: оба правила объявляют тот же ресурс шрифта , что и тот, который используется при Вы говорите font-family: LucidaGrande, с или без font-weight: 900.

Отбрасывание local(...), и вместо этого оно будет работать именно так, как вам нужно.

Кроме того, вы захотите превратите эти .ttf файлы в WOFF2, а затем загрузите их, потому что они намного меньше, а также пообещайте браузеру, что они действительно не обременены веб-шрифтами.