英文:
bold font weight not working with Google fonts in dompdf
问题
我正在使用dompdf将HTML代码转换为PDF。我正在使用Google字体，并像这样导入它们：
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap');
当我在我的CSS中使用它们时：
h1, h3, .text {
font-family: 'Open Sans';
font-weight: 400;
}
我可以得到正确的字体。但是，当一些文本加粗，如标题或某些加粗的文本时，它们不会得到正确的字体粗细。当我将字体粗细更改为400以上时，它们不再起作用。有谁知道如何在dompdf中使用多个字体粗细？
英文:
I'm using dompdf to turn HTML code into pdf. I'm using Google fonts and are importing them like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap');
<!-- end snippet -->
When i use them in my css with:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
h1, h3, .text {
font-family: 'Open Sans';
font-weight: 400;
}
<!-- end snippet -->
i get my text in the right font. Now when some of the text is bold like the headings or certain pieces of text that are bold, they don't get the right font weight. When i change the font-weight to above 400 they don't work anymore.
Does anyone know how to use multiple font weights in dompdf?
答案1
得分: 1
直到 Dompdf 0.8.4 版本发布之前，不支持数字字体权重。如果你使用的是 0.8.4 之前的 Dompdf 版本，就不能使用带有数字权重定义的字体。
此外，虽然支持数字字体权重，但在使用 @import 规则时，Dompdf 解析 Google 字体 URL 似乎存在一个 bug（参考 issue 2054）。你可以通过使用链接元素来解决这个问题。
以下类似的代码应该可以正常工作：
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">
<style>
.opensans {
font-family: 'Open Sans';
font-weight: 400;
}
</style>
</head>
<body>
<h1 class="opensans">The quick red fox jumped over the large brown log.</h1>
</body>
</html>
英文:
Until the release of Dompdf 0.8.4 numeric font weights were not supported. If you're using a version of Dompdf prior to 0.8.4 you can not use fonts defined with numeric weights.
Additionally, though numeric font weights are supported, there appears to be a bug in how Dompdf parses the Google Font URL when using with an @import rule. (ref issue 2054). You can work around this issue by using a link element instead.
Something like the following should work:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">
<style>
.opensans {
font-family: 'Open Sans';
font-weight: 400;
}
</style>
</head>
<body>
<h1 class="opensans">The quick red fox jumped over the large brown log.</h1>
</body>
</html>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论