Странное поведение подключенного шрифта при изменении font-weight

132

24 июля 2019, 00:10

Итак, я хочу подключить шрифт, чтобы использовать его разные версии через 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, можете протестировать

Answer 1

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

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