使用PhantomJS，自定义字体无法使用加粗/斜体功能。

Question

使用PhantomJS，自定义字体无法使用加粗/斜体功能。

4

当我尝试用phantomJS渲染自定义字体时，加粗和斜体标签无效/未生效。
所有CSS都直接在HTML模板中以“<head>”中的“<style>”标签形式呈现。
这是我的CSS：

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

然后在我的中：

<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;"部分，粗体和斜体就可以正常工作...

- Vincent Audebert

3个回答

3

我已经使用CSS解决了PhantomJS 2.x中的这个问题：

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

我给字体加了描边，这样看起来更加粗体。

- ESP32

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如何工作的方式。

- zwol

不，不需要。您不需要为不同的样式添加单独的字体。例如加粗，也可以作为CSS属性存在，使任何字体看起来更加粗体，而不管定义的字体是什么。在这里，快速查看一下这个fiddle，只有一个字体（正常）： https://jsfiddle.net/ghzs1egj/1/每个浏览器都可以正确显示，但自从Phantom发布2.x版本以来就无法正常显示。因此，这显然是一个错误。 - Paul Walczewski

无论这是否是一个错误，这个解决方案对我来说非常有效。谢谢。 - Pedro Moreira Mamede

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vincent Audebert · Accepted Answer

我刚找到了解决方案。您需要为您的font-face提供一个font-style和font-weight。

这是我的最终代码：

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