Итак, я хочу подключить шрифт, чтобы использовать его разные версии через 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, можете протестировать
sfuidisplay-regular-webfont.woff2
. В коде я просто скопировалfont-face
и изменил название. Я, наверное, чего-то в упор не вижу, покажите, пожалуйстаthin
просто переопределял мойnormal
. Кинуть в ответ?