font-style in @ font-face не работает с локальным шрифтом

Question

Для тега <i>, я хочу Английские символы, чтобы показать курсивом, а не английским символом, чтобы показать как обычно.

Это мой CSS.

@font-face { 
    font-family: MyCustomFont; 
    src: local(Kaiti); 
} 

@font-face { 
    font-family: MyCustomFont; 
    font-style:italic; 
    unicode-range: U+00-024F; 
    src: local(Arial); 
} 

i { 
    font-family: MyCustomFont; 
    font-style:normal; 
} 

Фактический результат

Не-английские символы в Kaiti Normak, что правильно, но английские символы не Arial курсив. Я что-то пропустил?

Я использую Chrome 54.0.

Answer 1

Установите резервный шрифт для i:

i { 
    font-family: MyCustomFont, Arial, serif; 
} 

Answer 2

Edit: Это ваш HTML:

<i>食english</i> 

для того, чтобы назначить конкретные CSS атрибуты части этого текста вам нужно заключите его в другой элемент. Например:

<i>食<span>english</span></i> 

Теперь вы можете ссылаться на этот элемент (SPAN в данном случае) в CSS:

span { 
    font-style:italic; 
} 

Атрибут вы ищете стиль шрифта: курсив; HTML em element выделяется курсивом (браузер уже применяет вышеуказанный стиль), насколько я знаю. Таким образом, вы можете пойти с:

<i>食<em>english</em></i> 

и избегать применения стиля (как браузер делает это напрямую).

Надеюсь, это поможет.

---

Оригинал:

Если я понял вопрос правильно, вы пропускаете курсив стиля:

i { 
    font-family: MyCustomFont; 
    font-style:italic; 
} 

@font-face { 
 
    font-family: MyCustomFont; 
 
    src: local(Kaiti); 
 
} 
 

 
@font-face { 
 
    font-family: MyCustomFont; 
 
    font-style:italic; 
 
    unicode-range: U+00-024F; 
 
    src: local(Arial); 
 
} 
 

 
i { 
 
    font-family: MyCustomFont; 
 
    font-style:italic; 
 
}

<span>食<i>english</i></span>