Пользовательские шрифты, не выделенные жирным или курсивом в IE

Question

Я пытаюсь загрузить локальные шрифты с пользовательскими именами. Все работает отлично во всех браузерах, кроме IE, как всегда. Шрифт не отображается в bold или italic. Кажется, я не понимаю, что я здесь делаю неправильно.

Вот демо: http://jsfiddle.net/maitreyjukar/5ga5k2oa/

Я загружая шрифт, используя следующий CSS

@font-face { 
    font-family: k_Arial; 
    src: local("Arial"), 
     local("Helvetica"), 
     local("sans-serif"); 
    font-weight: normal; 
    font-style: normal; 
} 

для всех комбинаций начертание шрифта и стиля шрифта.

Answer 1

Это не IE-конкретный вопрос - я на Firefox 38 и она не работает здесь либо ...

local sources обычно используется для поиска на компьютере пользователя, прежде чем указывать на URL, в чтобы ускорить процесс.

Однако вы, похоже, хотите использовать только локально установленные шрифты с определенным резервным заказом. Для достижения этой цели, вы можете просто сделать следующее:

body { 
    font-family: Arial, Helvetica, sans-serif; 
} 
.bold { 
    font-weight: bold; 
} 
.italic { 
    font-style: italic; 
} 

Дополнительный совет: Объединить bold и italic классы и вам не нужен дополнительный класс bolditalic.

JS-Fiddle

Answer 2

Это не только не IE-конкретный вопрос он не работает в других браузерах, таких как Firefox. Просто написать один шрифт-лица Правило istead из четырех, как это:

@font-face { 
font-family: k_Arial; 
src: local("Arial"), 
    local("Helvetica"), 
    local("sans-serif"); 
} 

Вот мое решение: http://jsfiddle.net/deepak__yadav/1eed9na5 я надеюсь, вы поймете, что вы сделали неправильно.

Answer 3

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

@font-face { 
     font-family: 'ProximaNovaRegular'; 
     src: url('../fonts/ProximaNovaRegular.eot'); 
     src: url('../fonts/ProximaNovaRegular.eot') format('embedded-opentype'), 
      url('../fonts/ProximaNovaRegular.woff2') format('woff2'), 
      url('../fonts/ProximaNovaRegular.woff') format('woff'), 
      url('../fonts/ProximaNovaRegular.ttf') format('truetype'), 
      url('../fonts/ProximaNovaRegular.svg#ProximaNovaRegular') format('svg'); 
    }