0

Итак, я хочу подключить шрифт, чтобы использовать его разные версии через font-weight.

Одно название, несколько font-weight. У меня есть файл с подключением шрифтов fonts.css

Обратите внимание на

SFUI-Display-Regular и SFUI-Display с font-weight: normal.

Они должны вести себя одинаково, но при этом ведут себя по-разному.

Вот верстка, где я их тестирую:

@font-face {
  font-family: 'SFUI-Display-Regular';
  src: url('sfuidisplay-regular-webfont.woff2') format('woff2'), url('sfuidisplay-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SFUI-Display';
  src: url('sfuidisplay-regular-webfont.woff2') format('woff2'), url('sfuidisplay-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SFUI-Display';
  src: url('sfuidisplay-bold-webfont.woff2') format('woff2'), url('sfuidisplay-bold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'SFUI-Display';
  src: url('sfuidisplay-thin-webfont.woff2') format('woff2'), url('sfuidisplay-thin-webfont.woff') format('woff');
  font-weight: thin;
  font-style: normal;
}

body {
  background: green url(../../img/bgall-min.png) no-repeat;
  width: 1910px;
  letter-spacing: 0.085em;
  font-family: 'SFUI-Display';
  font-weight: normal;
  padding-top: 100px;
}

.normal {
  font-family: "SFUI-Display-Regular";
  font-weight: normal;
}

.not-normal {
  font-family: "SFUI-Display";
  font-weight: normal;
}

.bold {
  font-weight: bold;
}

.thin {
  font-weight: thin;
}
<div class="normal">
  Regular-Regular
</div>

<div class="not-normal">
  Regular-Thin
</div>

<div class="bold">
  Bold
</div>

<div class="thin">
  Thin
</div>

При этом вывод у меня такой:

Проблема здесь

Что не так, я не пойму? Если что, вот ссылка на Github, можете протестировать

6
  • А почему ты считаешь, что они должны вести себя одинаково... Это два разных шрифта?
    – Air
    5 янв 2019 в 4:51
  • @Air, почему разных? Ссылки же на один и тот же файл, sfuidisplay-regular-webfont.woff2. В коде я просто скопировал font-face и изменил название. Я, наверное, чего-то в упор не вижу, покажите, пожалуйста 5 янв 2019 в 7:25
  • Вот на это я не обратил внимания. А зачем тебе два названия одного шрифта?
    – Air
    5 янв 2019 в 7:45
  • @Air, для теста 5 янв 2019 в 7:48
  • @Air, я попробовал использовать вместо thin число(100), и все работает. Почитал про font-weight, в css просто нет слова thin. Я думаю, в моем случае этот thin просто переопределял мой normal. Кинуть в ответ? 5 янв 2019 в 7:51

1 ответ 1

0

Я нашел проблему. В css просто нет такого слова thin. Теперь я использую только числа, типа 200 и 100, все работает как надо, причем 400 понимается как normal, 700 - как bold, все в порядке.

А запутался я из-за того, что моя IDE подсвечивала thin, хотя и не выдавала автодополнение.

1
  • МММмда...))))))
    – Air
    5 янв 2019 в 8:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.