4

当我尝试使用 phantomJS 呈现自定义字体时，粗体和斜体标签不起作用/未应用。

我所有的 CSS 都是直接在 HTML 模板中的<head>一个<style>标签中。

这是我所拥有的：

@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 生成这个图像： 字体不错，但不是粗体或斜体

它肯定使用了好的字体，但没有应用粗体和斜体。任何想法 ？

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

4

3 回答 3

4

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

这是我的最终代码：

@font-face {
    font-family: 'userSelectedFont';
    font-style: normal;
    font-weight: normal;
    src: url("/usr/share/fonts/dejavu/DejaVuSerif.ttf");
}
于 2013-11-04T02:37:13.770 回答
3

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

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

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

于 2019-03-21T10:13:18.273 回答
1

普通、粗体、斜体和粗斜体是单独的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是指定的工作方式。

于 2016-02-04T16:06:46.547 回答