Я сейчас играю с переменными шрифтами.Я реализовал рабочий переменный шрифт и хочу изменить вес <h3> при наведении.
Использование font-variation-settings: 'wght' 200; и font-variation-settings: 'wght' 500; при наведении отлично работает локально, но как только я нажимаю на неговетка master на Github и она публикуется через Netlify, перестает работать.Проверка его с помощью инспектора в Chrome, Safari и Firefox * показывает, что удаляются одинарные кавычки, так что это просто font-variation-settings: wght 200.Я дважды проверил загруженный .css-файл, и он там правильно.
Снимок экрана из инспектора
Если я добавлю одинарные кавычки в инспекторе вручную, он начнет работать на текущей странице.
Каждый источник Iчитайте о переменных шрифтах, используя этот синтаксис font-вариации-настроек (я тоже пробовал с двойными кавычками), поэтому я не знаю, почему он теряется.
Я реализовал шрифт так:
@font-face {
font-family: 'Variable';
src:url("_assets/fonts/variable.ttf") format("truetype-variations");
font-weight: 200;
font-style: normal;
font-stretch: normal;
}
CSS такой
.inner h3 {
font-variation-settings: 'wght' 200;
}
.inner:hover h3 {
font-variation-settings: 'wght' 500;
}
Шрифт корректно отображается на активной странице, только изменение веса не работает.
* Я знаю, что переменные шрифтыне полностью поддерживаются Firefox.