@font-face и font-variant плохая идея?

Question

если я использую @font-face шрифт и font-variant: small-caps для того же селектора шрифт будет заменен на следующий системный шрифт по умолчанию в safari.как мне обойти это?

Answer 1

Ну, я думаю, это просто ошибка: ( теперь я использую псевдоселектор с первой буквой для достижения этой цели

Answer 2

Сначала у меня возникли некоторые проблемы с созданием примера для воспроизведения вашей проблемы, что заставило меня понять, что font-face не является стандартным атрибутом CSS2;эквивалентом является семейство шрифтов.Итак, я провел небольшое исследование по @font-face и обнаружил, что это - в зависимости от того, как вы на это смотрите - либо нестандартный атрибут, специфичный для Firefox 3.5, либо часть еще не распространенного CSS3.Safari имеет частичную поддержку CSS3, в зависимости от версии, но я подозреваю, что это является причиной вашего нежелательного поведения.

Answer 3

Это была ошибка WebKit.Это было исправлено, и Safari следует все будет в порядке при следующем обновлении.Текущая версия Chrome использует более новую версию WebKit, где ошибка была исправлена.Вот хороший способ обнаружить это (из Safarismallcaps webfontfix Сафарисмалл Капс Вебфонтфикс):

if ((navigator.userAgent.match(/WebKit\/([^.]+)/) || [] )[1] < 534) {
    // Broken, work around it!
}

Вы могли бы использовать этот JavaScript, скажем, для добавления класса в html создайте узел и измените свой стиль оформления страницы.