Расширение объявления @font-face из внешнего CSS-файла

Question

Я использую веб-шрифт, который объявлен с @font-face во внешнем CSS-файле. Служба шрифтов настроена так, что я получаю внешний файл CSS, а затем просто использую шрифт в моем CSS. Я не могу найти сам файл шрифта в своем собственном определении @font-face.

Каждый раз, когда я использую веб-шрифт на своем сайте, я добавляю к нему одни и те же два определения стиля. Итак, мое использование шрифта всегда выглядит примерно так:

h2{
   font-family: 'Knockout 26 A';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

Добавление сглаживания и оттенков серого КАЖДЫЙ РАЗ, когда я использую шрифт, кажется излишне избыточным. Есть ли способ для меня, чтобы расширить объявление @font-face из внешнего файла в моем собственном CSS?

Спасибо!

Answer 1

Невозможно продлить @font-face декларация. Согласно текущей рекомендации W3C для шрифтов (3 октября 2013 г.) @font-face требует font-family а также src дескрипторы или объявление недействительно. Кроме того, дескрипторы ограничены:

• семейство шрифтов
• ЦСИ
• Юникод-диапазон
• вариант шрифта
• Шрифт-функция-настройка
• Шрифт растяжения
• начертание шрифта
• стиль шрифта

так что вы не сможете использовать webkit-font-smoothing или же moz-osx-font-smoothing тем не мение.

Я рекомендую использовать CSS-препроцессор, такой как Sass, Less или Stylus, чтобы сократить многословность CSS. Но если вы не можете использовать их, вам просто нужно продолжать писать свои CSS-декларации, как и сейчас.

Answer 2

Я на самом деле столкнулся с такой же проблемой, потому что @font-face объявление было сделано во внешнем файле CSS, который я не мог контролировать.

Я также попытался переопределить объявление @font-face, но оно не работает.

Таким образом, решение в моем случае было на самом деле объявить @font-face ДО включения внешнего CSS-файла. Браузер будет использовать мой @font-face объявление и игнорировать тот во внешнем файле.

Answer 3

Я бы порекомендовал использовать менее смешанные. С сайта lesscss.org:

Mixins are a way of including ("mixing in") a bunch of properties from one rule-set into another rule-set.

Например, вы можете написать:

.knockout{
   font-family: 'Knockout 26 A';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

И добавьте миксин, где вы хотите применить шрифт:

h2{
    .knockout;
}

Больше на миксин