Fatal编程技术网
  • css/
  • Css 在带有Rotativa的标题中使用自定义字体

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

css fonts

Css 在带有Rotativa的标题中使用自定义字体,css,fonts,wkhtmltopdf,rotativa,Css,Fonts,Wkhtmltopdf,Rotativa,我想在pdf文件的标题中使用自定义字体 使用字体名称只能在存在该字体的系统上正常工作 使用以下代码接受字体主体内的文本，但不适用于标题 我不想使用谷歌字体，我想使用我自己的自定义字体 @@font-face { font-family: 'hpf'; font-style: normal; font-weight: normal; src: url(data:font/truetype;ch

我想在pdf文件的标题中使用自定义字体

使用字体名称只能在存在该字体的系统上正常工作

使用以下代码接受字体主体内的文本，但不适用于标题

我不想使用谷歌字体，我想使用我自己的自定义字体

     @@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;
        }
我使用woff、woff2和ttf文件完成了这项工作，但没有使用base64进行测试。但是，如果不能使用base64格式，可以选择转换为其他格式。如果是这种情况，您可以使用（请检查）或您喜欢的任何其他转换器

下面是我在项目中测试的一个HTML文件示例（为了澄清，我刚刚将我使用的字体名称更改为MyFont）：

就我所见，与您的唯一不同之处在于，我在
格式（“truetype”）
上使用了简单的引号，但似乎没有实际影响，因为它也可以使用双引号

由于您的问题可能是base64编码的数据，我建议您使用以下工具生成base64：

选中这些选项：ttf（作为FontFormats）、保持现有的（作为TrueType Hinting）和Base64 Encode（作为CSS）将生成一个完整的套件来测试您的字体。请记住，此工具需要接受一个协议条款，该条款规定您的字体在法律上符合web嵌入的资格

查看本文阅读完整的演练，以正确生成工具包和更有用的信息：

<!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>

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