Question

我对KendoUI PDF导出有问题。我相信会加载核心的“ Regular”字体，但各种字体似乎都没有。我配置“ bold \ semibold \ etc”错误吗？文档真的很难解释这一点。

例如，字体粗细为700的“ Work Sans”；不会显示在pdf中，看起来就像常规的一样。显然是Work Sans，但没有什么大胆的。

简单的VSCode项目示例：

https://www.dropbox.com/s/w25q38w1makog3w/FontProject.zip?dl=0

所以这是我的Sass字体家族

$font-Halant: 'Halant', serif;
$font-IBMPlexSerif: 'IBM Plex Serif', serif;
$font-Lato: 'Lato', sans-serif;
$font-Roboto: 'Roboto', sans-serif;
$font-SourceSansPro: 'Source Sans Pro', sans-serif;
$font-WorkSans: 'Work Sans', sans-serif;

它们都是该页面的Google字体，并且ttfs保存在本地，用于kendo导出。页面上的所有内容看起来都很不错，所有字体都在那里。

这就是我定义导出字体的方式

kendo.pdf.defineFont({
            //Halant
            "Halant": "fonts/Halant/Halant-Regular.ttf",
            "Halant|SemiBold": "fonts/Halant/Halant-SemiBold.ttf",
            "Halant|Bold": "fonts/Halant/Halant-Bold.ttf",
            "Halant|Medium": "fonts/Halant/Halant-Medium.ttf",

        //Roboto
        "Roboto": "fonts/Roboto/Roboto-Regular.ttf",
        "Roboto|Bold": "fonts/Roboto/Roboto-Bold.ttf",
        "Roboto|Medium": "fonts/Roboto/Roboto-Medium.ttf",

        //IBM
        "IBM Plex Serif": "fonts/IBM_Plex_Serif/IBMPlexSerif-Regular.ttf",
        "IBM Plex Serif|Bold": "fonts/IBM_Plex_Serif/IBMPlexSerif-Bold.ttf",
        "IBM Plex Serif|Medium": "fonts/IBM_Plex_Serif/IBMPlexSerif-Medium.ttf",
        "IBM Plex Serif|SemiBold": "fonts/IBM_Plex_Serif/IBMPlexSerif-SemiBold.ttf",

        //Lato
        "Lato": "fonts/Lato/Lato-Regular.ttf",
        "Lato|Bold": "fonts/Lato/Lato-Bold.ttf",

        //Source Sans Pro
        "Source Sans Pro": "fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf",
        "Source Sans Pro|Bold": "fonts/Source_Sans_Pro/SourceSansPro-Bold.ttf",
        "Source Sans Pro|SemiBold": "fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf",

        //Work Sans
        "Work Sans": "fonts/Work_Sans/WorkSans-Regular.ttf",
        "Work Sans|Bold": "fonts/Work_Sans/WorkSans-Bold.ttf",
        "Work Sans|Medium": "fonts/Work_Sans/WorkSans-Medium.ttf",
        "Work Sans|SemiBold": "fonts/Work_Sans/WorkSans-SemiBold.ttf"
    });

Answer 1

Telerik回答了该帖子，并将其发布给其他人。基本上只需命名一个新的字体，指定文件，就可以了。

现在，我仍然对该页面使用 Want 谷歌字体，因此在PDF导出上，我在主体上应用了.exporting类，因此我将为此使用这些字体名称。

1）从索引中删除googlefonts链接：

<head> 
    <!-- Fonts -->
    <!-- <link href="https://fonts.googleapis.com/css?family=Halant:400,600|IBM+Plex+Serif:400,400i,600,600i,700|Lato|Roboto:400,500,700|Source+Sans+Pro:400,600,700|Work+Sans:400,500,600" rel="stylesheet"> --> 
</head>

2）从resumes.js中删除kendo.pdf.defineFont方法：

kendo.pdf.defineFont({...})

3）在resume.css文件中使用font-face从本地文件加载所需的字体：

@font-face {
  font-family: "Work Sans";
  src: url("fonts/Work_Sans/WorkSans-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Work Sans Bold";
  src: url("fonts/Work_Sans/WorkSans-Bold.ttf") format("truetype");
}

请注意，Bold文件的声明略有不同。这样就可以在resume.css中更改字体的用法，如下所示：

.resume.style2 {
  font-family: "Work Sans";
}

.resume.style2 header h3 {
  font-size: 16pt;
  font-family: "Work Sans Bold";
}

.resume.style2 section h4 {
  line-height: 23px;
  font-size: 12pt;
  letter-spacing: 0.1pt;
  font-family: "Work Sans Bold";
}

Kendo PDF中的字体错误或不一致

1 个答案: