CSS font-family HelveticaNeue-Light不呈现粗体

时间:2015-01-29 10:07:55

标签: ios css ios7 ios8 font-family

我很难让iOS 7/8正确渲染我的字体。似乎iOS不知道如何渲染Helvetica Neue Light(HelveticaNeue-Light / HelveticaNeue-Bold)的大胆变体。

E.g。我有以下CSS选择器:

body {
    font-family: "HelveticaNeue-Light";
}

h1 {
    font-weight: bold;
}

h2 {
    font-weight: 600;
}

我的标记:

<li>
    <h1>A. Crimson Tide UK (Enabled Customer - UK Depot)</h1>
    <h2>1-14</h2>
    <h2>10:00 - 11:00</h2>
    <p>0914 Desc</p>
</li>

每当我有一个h1标签时,iOS似乎会呈现Helvetica Neue Condensed Bold(HelveticaNeue-CondensedBold) - 而不是Helvetica Neue Bold(HelveticaNeue-Bold)。

以下是我的网页的截图:

iOS Font Issue

为什么渲染Helvetica Neue Condensed Bold而不是Helvetica Bold - 我没有在我的CSS中设置Condensed!

如果我将h1 font-weight设置为900,它会在Helvetica Neue中呈现,并且稍微大胆,但不是我想要的权重。

如果有人能够对此有所了解,我们将不胜感激。

先谢谢你。

1 个答案:

答案 0 :(得分:1)

我通过定义HelveticaNeue字体然后指定权重并将它们指向各自的本地字体文件来克服这个问题,如下所示:

@font-face {
    font-family: "HelveticaNeue";
    font-weight: 100;
    src: local("Helvetica Neue Thin"),
    local("HelveticaNeue-Thin");
}

@font-face {
    font-family: "HelveticaNeue";
    font-weight: 300;
    src: local("Helvetica Neue Light"),
    local("HelveticaNeue-Light");
}

@font-face {
    font-family: "HelveticaNeue";
    font-weight: normal;
    src: local("Helvetica Neue"),
    local("HelveticaNeue");
}

@font-face {
    font-family: "HelveticaNeue";
    font-weight: bold;
    src: local("Helvetica Neue Bold"),
    local("HelveticaNeue-Bold");
}

然后只是被指定为首选字体系列和身体的重量:

body {
    font-family: HelveticaNeue, Helvetica, Arial, Verdana, sans-serif;
    font-weight: 300;
}

这样,所有权重都在我的控制之下 - 粗体永远不会变成浓缩粗体,它仍然是粗体。

回到iOS8为什么这样做......不知道。