Bold / Italic不适用于使用PhantomJS的自定义字体
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bold / Italic不适用于使用PhantomJS的自定义字体相关的知识，希望对你有一定的参考价值。
当我尝试使用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会生成这个图像：
它肯定使用了良好的字体，但没有应用粗体和斜体。任何的想法 ？
PS：如果我删除style="font-family: userSelectedFont-7, sans-serif;"部分它可以很好地用粗体和斜体...
答案
我刚刚找到了解决方案。你需要提供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");
}
另一答案
普通，粗体，斜体和粗体斜体是单独的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工作的。
另一答案
我已经能够使用CSS在PhantomJS 2.x中解决这个问题：
strong, b {font-weight: normal; -webkit-text-stroke: 0.05em;}
我对字体应用笔划，使其看起来很大胆。
以上是关于Bold / Italic不适用于使用PhantomJS的自定义字体的主要内容，如果未能解决你的问题，请参考以下文章
IEEE论文检测的字体未嵌入问题Times New Roman,Bold, Times New Roman,Italic is not embedded解决方法