在 Rotativa 的标题中使用自定义字体

Question

I want to use a custom font in the header of the pdf file.我想在 pdf 文件的标题中使用自定义字体。

Using the font name only works properly on systems where that font exists使用字体名称只能在存在该字体的系统上正常工作

Accepts the text inside the body of the font using the following code, but does not work for headers使用以下代码接受字体正文内的文本，但不适用于标题

I do not want to use Google fonts and I want to use my own custom fonts我不想使用谷歌字体，我想使用我自己的自定义字体

     @@font-face {
            font-family: 'hpf';
            font-style: normal;
            font-weight: normal;
            src: url(data:font/truetype;charset=utf-8;base64,AAEAAAAPAIAA...) format("truetype");
        }



       * {
            font-family: 'hpf' !important;
        }

Answer 1

I accomplished this using woff , woff2 and ttf files, but haven't tested it with base64 .我使用woff 、 woff2和ttf文件完成了此操作，但尚未使用base64对其进行测试。 However, if you can't make it work with base64 format, you can choose to convert to the other formats.但是，如果您不能使用 base64 格式，您可以选择转换为其他格式。 If this is the case, you could make use of https://onlinefontconverter.com (please, check this link ), or any other conveter you prefer.如果是这种情况，您可以使用https://onlinefontconverter.com （请查看此链接）或您喜欢的任何其他转换器。

Here is a sample HTML file I have tested in my project (to clarify, I just changed the font name I used to MyFont ):这是我在我的项目中测试的示例 HTML 文件（为了澄清，我只是将字体名称更改为MyFont ）：

<!DOCTYPE html>

<head>
    <style>
    @font-face { font-family: 'MyFont'; src: url('../../../Content/fonts/MyFont.woff2') format('woff2'), 
                      url('../../../Content/fonts/MyFont.woff') format('woff'), 
                      url('../../../Content/fonts/MyFont.ttf') format('truetype') }
        .custom-font-text {
            font-family: 'MyFont' !important;
        }
    </style>
</head>

<div>
    Normal text <div class="custom-font-text">Text with custom font</div> 
</div>

Please, also pay attention to the URLs, as they're crucial to make this approach work.请同时注意 URL，因为它们对于使这种方法起作用至关重要。 In my case, font files are stored inside a folder called fonts, which is inside a folder called Content , in project's root folder ( /Content/fonts ).就我而言，字体文件存储在名为 fonts 的文件夹中，该文件夹位于项目根文件夹 ( /Content/fonts ) 中名为Content的文件夹中。 The final So I have to use " ../ " each time I want to go backwards from my /Views/Documents/PDF folder, where the header is placed.最后所以每次我想从放置标题的/Views/Documents/PDF文件夹向后移动时，我都必须使用“ ../ ”。

EDIT (Base64 testing) :编辑（Base64 测试） ：

Tested successfully using base64 .使用base64测试成功。 Here is my code:这是我的代码：

@font-face {
    font-family: 'MyFont';
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAAOA...) format('truetype');
}
.custom-font-text {
    font-family: 'MyFont' !important;
}

As far as I can see, the only difference with yours is that I'm using simple quotes on format("truetype") , but seems to have no real impact, as it also works with double quotes.据我所知，与您的唯一区别是我在format("truetype")上使用简单引号，但似乎没有实际影响，因为它也适用于双引号。

As your problem might be on the base64 encoded data, I would recommend you to generate the base64 using a tool like this:由于您的问题可能出在 base64 编码数据上，我建议您使用如下工具生成 base64：

https://www.fontsquirrel.com/tools/webfont-generator https://www.fontsquirrel.com/tools/webfont-generator

Checking these options: ttf (as FontFormats ), Keep existing (as TrueType Hinting ) and Base64 Encode (as CSS ) will generate a complete kit to test your font.检查这些选项： ttf （作为FontFormats ）、 Keep existing （作为TrueType Hinting ）和Base64 Encode （作为CSS ）将生成一个完整的工具包来测试您的字体。 For your information, please, have in mind that this tool requires to accept an agreeement clause which states that your font is legally eligible for web embedding .为了您的信息，请记住，此工具需要接受一项协议条款，该条款声明您的字体在法律上符合 Web 嵌入条件。

Check this post to read a complete walkthrough to properly generate the kit and more useful info:查看这篇文章以阅读完整的演练以正确生成套件和更多有用的信息：

https://www.htmlgoodies.com/beyond/webmaster/serving-up-base64-encoded-custom-fonts.html https://www.htmlgoodies.com/beyond/webmaster/serving-up-base64-encoded-custom-fonts.html

在 Rotativa 的标题中使用自定义字体

问题描述

1 个解决方案

解决方案1
0 2020-11-18 08:02:28

在 Rotativa 的标题中使用自定义字体

问题描述

1 个解决方案

解决方案1 0 2020-11-18 08:02:28

解决方案1
0 2020-11-18 08:02:28