字體樣式@字體面不與本地字體工作

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; 
} 

實際的結果是

非英語字符是凱提normak，這是正確的，但是英文字符不是宋體斜體。我錯過了什麼嗎？

我使用的是Chrome 54.0。

Answer 1

設置一個備用字體爲i：

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

Answer 2

編輯： 這是你的HTML：

<i>食english</i> 

以指定特定的CSS屬性，你需要的是文本的一部分將它放在一個不同的元素中。例如：

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

現在你可以在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>