Могу ли я использовать CSS-переменные в списке шрифтов, чтобы они работали в старых браузерах?

Question

Я бы хотел использовать переменную CSS для хранения шрифта, если у пользователя не установлен указанный шрифт.

Пример:

:root {
     --common-font: Comic Sans MS;
}

.header1 {
     font-family: CoolFont1, var(--common-font);
}

Не сломаются ли устаревшие браузеры, если я добавлю ссылку на переменную в именах шрифтов?

https://caniuse.com/#feat=css-variables

Answer 1

Да, он сломается, вы должны использовать резервный шрифт для устаревшего браузера без использования CSS-переменных.

Например:

   .header {
       font-family: sans-serif; /* This is fallback font for old browsers */
       font-family: var(--common-font);
    }

Также вы можете использовать @ поддерживает условие с запросом фиктивной функции:

.header {
    @supports ( (--a: 0)) {
      /* supported */
      font-family: var(--common-font);
    }

    @supports ( not (--a: 0)) {
      /* not supported */
      font-family: sans-serif; /* This is fallback font for old browsers */
    }
}