Question

我正在尝试使用自定义名称加载本地字体。一如既往，除了IE之外，所有浏览器都能完美运行。字体未以粗体或斜体呈现。我似乎无法理解我在这里做错了什么。

这是一个演示： 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;
}

用于font-weight和font-style的所有组合。

Answer 1

这不仅不是特定于IE的问题，而且在Firefox等其他浏览器上也不起作用。只写一个font-face规则，而不是四个：

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

以下是我的解决方案：http://jsfiddle.net/deepak__yadav/1eed9na5我希望您能理解您做错了什么。

Answer 2

这不是特定于IE的问题 - 我在Firefox 38上也没有在这里工作......

local sources通常用于在指向网址之前搜索用户的计算机，以加快速度。

但是，您似乎只想使用具有特定回退顺序的本地安装字体。为此，您可以简单地执行以下操作：

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

额外提示：结合bold和italic课程，您不需要额外的课程bolditalic。

<强> JS-Fiddle

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

自定义字体在IE中未以粗体或斜体呈现

3 个答案: