Как использовать разные шрифты для разных браузеров

Question

У меня возникла проблема с использованием шрифтов через @font-face: Chrome игнорирует font-weight правило с этим шрифтом, поэтому титры выглядят плохо. Поиск не дал никаких результатов в моем случае. Поэтому я нашел другую версию моего шрифта, чтобы использовать ее в Chrome.

Можете ли вы рассказать мне простейший способ установить другой шрифт для заголовков только в этом браузере?

Answer 1

Чтобы установить стиль специально для браузера, самым простым решением является использование javascript для обнаружения браузера и записи имени браузера тегу body на странице как имя класса. Затем вы можете использовать имя класса для управления CSS для этого браузера.

Here's a jsFiddle that detects Chrome.

Но ваш вопрос может быть в состоянии быть лучше решены без добавления дополнительного сценария и разметки.

Выполните двойную проверку пути шрифта. Некоторые браузеры до сих пор найти шрифт, некоторые из них более разборчивы:

@font-face { 
    font-family: 'your-font-name'; 
    src: url('/fonts/your-font-name.woff2') format('woff2'), /* check path */ 
    url('/fonts/your-font-name.woff') format('woff'); /* check path */ 
    font-weight: normal; /* if this is being ignored, try declaring it in the h1 */ 
    font-style: normal; 
} 

Если вы объявили «начертание шрифта: нормальный;» в вашем @font декларации, и это игнорируется, для некоторых браузеров, которые необходимо создать дополнительное правило для стиля h1:

h1 { 
    font-weight: normal; 
}