@ font-face中的font-style不适用于本地字体

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

修改： 这是你的HTML：

<i>食english</i>

为了将特定的css属性分配给该文本的一部分，您需要将其包含在不同的元素中。例如：

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

现在您可以在css中引用该元素（在本例中为span）：

span {
    font-style:italic;
}

您要查找的属性是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>