字体样式@字体面不与本地字体工作

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>