Возможно, неразрешимая проблема Sass / CSS: я использую переменный шрифт, но в настоящее время Chrome поддерживает только font-variation-settings
вместо возможности использования font-weight
, font-style
и т. Д. Я все еще хочу использовать font-weight
и т. Д. Для старых браузеровкоторые не поддерживают переменные шрифты.
Мне не нужно вводить два свойства каждый раз, когда я устанавливаю стиль шрифта или шрифт!Итак, я придумал несколько миксов:
@mixin font-weight($weight) {
font-variation-settings: "wght" $weight;
font-weight: $weight;
}
@mixin oblique($angle) {
font-variation-settings: "slnt" $angle;
font-style: oblique #{$angle + deg};
}
Очевидно, что иногда мне захочется использовать оба значения font-weight и oblique, и вы не сможете установить одно и то же свойство CSS дважды - это будетпросто переопределить.Итак, я придумал этот
@mixin font-weight($weight) {
--weight: #{$weight};
font-variation-settings: "wght" var(--weight), "slnt" var(--angle, 0);
font-weight: $weight;
}
@mixin oblique($angle) {
--angle: #{$angle};
font-variation-settings: "slnt" var(--angle), "wght" var(--weight, 400);
font-style: oblique #{$angle + deg};
}
, который вроде работает, за исключением того, что значение по умолчанию для font-weight 400 не в порядке - это обычный вес браузеров по умолчанию, но он не учитывает тот факт, чтоЯ, вероятно, установил вес шрифта где-нибудь еще.Я мог бы наполовину сдаться и сделать из него один микс @mixin weight-and-oblique($weight, $oblique)
, но это ужасный API для работы с imo.Есть ли решение?