英文:
font-family rule: Must I include spaces in local font names?
问题
尽管我已在我的Windows机器上安装了Liberation Sans字体，但当Google Chrome呈现下面代码片段中的第一行时，它并未使用该字体。显然，这是因为font-family规则使用了PostScript名称LiberationSans（没有空格）。当我添加空格（如第二行所示）时，它就能正常工作：
必须在font-family规则中始终包括本地字体名称中的空格吗？我之所以问是因为此样式表使用不带空格的PostScript名称，以解决wkhtmltopdf中的一个缺陷。
.psname {
font-family: LiberationSans, Arial;
}
.name {
font-family: "Liberation Sans", Arial;
}
<p class="psname">Jove, look at this font!</p>
<p class="name">Jove, look at this font!</p>
英文:
Although I have installed the Liberation Sans font on my Windows machine, it is not used by Google Chrome when it renders the first line in the snippet below. Apparently this is because the font-family rule uses the PostScript name LiberationSans (without a space). When I add the space (as for the second line), it works:
Must I always include the spaces in local font names in a font-family rule? I ask because this stylesheet uses PostScript names without spaces in order to address a flaw in wkhtmltopdf.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.psname {
font-family: LiberationSans, Arial;
}
.name {
font-family: "Liberation Sans", Arial;
}
<!-- language: lang-html -->
<p class="psname">Jove, look at this font!</p>
<p class="name">Jove, look at this font!</p>
<!-- end snippet -->
答案1
得分: 2
如果您想引用本地字体系列，必须将其写成与任何给定操作系统上的字体系列拼写完全相同。在实际应用中，如果需要支持旧的名称，您需要两种方式都拼写font-family。如果某些系统上同一字体的拼写方式不同，还可以列出更多名称。例如：
font-family: "Liberation Sans", "LiberationSans", "Arial", sans-serif;
请注意，我还添加了关键字sans-serif作为后备，以防操作系统没有列出的任何本地字体系列。您应该为所有字符串使用引号，而对于关键字则不使用引号。由于历史原因，大多数浏览器支持去掉无空格名称的引号字符，但您不应该依赖于此。官方语法只接受字符串或预定义关键字。
至于wkhtmltopdf，根据我的经验，它存在很多错误，您可能不想使用它。我建议使用electron-pdf，如果您可以安装所需的依赖项（基本上是具备足够新版本的Node.js的npm，也可能需要xvfb-run，如果您希望以无界面方式运行electron-pdf）。
英文:
If you want to refer to local font family, you have to write it exactly as the font family is spelled on any given OS. In practice, if you need to support legacy names, you'll need to spell the font-family in both ways. List even more names if it turns out that the same font has yet-different spelling on some system. For example:
font-family: "Liberation Sans", "LiberationSans", "Arial", sans-serif;
Note that I added keyword sans-serif as a fallback, too, in case the OS wouldn't have any of the listed local font families. You should use quotes for all strings and no quotes for the keywords. Due historical reasons most browsers supports leaving out the quotation characters with spaceless names but you shouldn't trust on that. The official syntax is just strings or predefined keywords.
As for the wkhtmltopdf, it has been so buggy in my experience that you probably do not want to use it. I'd recommend using electron-pdf instead, if you can install the required dependencies (basically npm with recent enough Node.js, maybe xvfb-run, too, if you want to run electron-pdf headless).
答案2
得分: 0
需要在你的项目文件夹中添加一个字体文件夹，并在CSS文件中导入该字体，就像我的附加截图一样。
在CSS中导入如下：
@font-face {
font-family: "LiberationSans-Bold";
src: url("./fonts/LiberationSans-Bold.ttf");
}
英文:
You need to add fonts folder on you'r project folder and import that fonts in CSS file like my attached screenshot.
In CSS import using that:
@font-face {
font-family: "LiberationSans-Bold";
src: url("./fonts/LiberationSans-Bold.ttf");
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论