Question

当我尝试使用phantomJS渲染自定义字体时，粗体和斜体标记不起作用/不会应用。

我的所有CSS都直接位于<head>标记中<style>的HTML模板中。

这就是我所拥有的：

@font-face {
    font-family: userSelectedFont;
    src: url("/usr/share/fonts/dejavu/DejaVuSerif.ttf");
}

然后在我的<body>：

<div style="font-family: userSelectedFont, sans-serif;"><strong><em>Test</em></strong></div>

但是phantomJS会生成这个图像： Good font but not in bold or italic

它肯定使用了良好的字体，但没有应用粗体和斜体。有什么想法吗？

PS：如果我删除style="font-family: userSelectedFont-7, sans-serif;"部分，它可以用粗体和斜体工作......

Answer 1

我刚刚找到了解决方案。您需要向font-style

提供font-weight和font-face

这是我的最终代码：

@font-face {
    font-family: 'userSelectedFont';
    font-style: normal;
    font-weight: normal;
    src: url("/usr/share/fonts/dejavu/DejaVuSerif.ttf");
}

Answer 2

普通，粗体，斜体和粗体斜体是单独的TTF文件，您需要为每个文件写一个单独的@font-face规则：

@font-face {
    font-family: 'userSelectedFont';
    font-style: normal;
    font-weight: normal;
    src: url(".../DejaVuSerif.ttf");
}
@font-face {
    font-family: 'userSelectedFont';
    font-style: normal;
    font-weight: bold;
    src: url(".../DejaVuSerif-Bold.ttf");
}
@font-face {
    font-family: 'userSelectedFont';
    font-style: italic;
    font-weight: normal;
    src: url(".../DejaVuSerif-Italic.ttf");
}
@font-face {
    font-family: 'userSelectedFont';
    font-style: italic;
    font-weight: bold;
    src: url(".../DejaVuSerif-BoldItalic.ttf");
}

然后在某个元素上设置font-family: "userSelectedFont"; font-weight: bold（例如）将按预期工作。

这不是PhantomJS中的错误;它是指定@font-face工作的方式。

Answer 3

我已经能够使用CSS在PhantomJS 2.x中解决此问题：

strong, b {font-weight: normal; -webkit-text-stroke: 0.05em;}

我对字体应用了笔触，使其看起来加粗。

Bold / Italic不使用PhantomJS处理自定义字体

3 个答案: