我正在使用pagedjs来呈现一个pdf,并使用他们的初学者工具包:https://gitlab.coko.foundation/pagedjs/starter-kits/book-spread_esm
当我通过页面打印功能导出PDF时,文本是可选择的,正如您所期望的那样。
但是当我更改字体时,文本是不可选的。
在其他示例中,他们更改了字体,并且PDF已正确呈现(文本可选择)示例:https://gitlab.coko.foundation/pagedjs/starter-kits/book_avanced-interface
所以我知道这是可能的。
"我所尝试的"
我最初从Google Fonts导入的字体如下所示:
Style.css:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;1,100;1,300;1,400;1,500;1,600&display=swap');
body{
font-family: 'Montserrat', 'sans-serif';
}
...
字体显示正确,但文本不可选。
接下来,我查看了字体的高级示例,看到他们将本地字体定义如下:
内部:/fonts/VG5000/stylesheet.css
:
@font-face {
font-family: 'VG5000';
src: url('VG5000-Regular_web.eot');
src: url('VG5000-Regular_web.eot?#iefix') format('embedded-opentype'),
url('VG5000-Regular_web.woff') format('woff'),
url('VG5000-Regular_web.woff2') format('woff2'),
url('VG5000-Regular_web.ttf') format('truetype'),
url('VG5000-Regular_web.svg#svgFontName') format('svg');
font-weight: normal;
font-style: normal;
}
然后在/style-print.css
中用作:
h1{
font-family: 'VG5000';
text-align: center;
}
所以我用我的字体模仿了这个(尽管有点复杂):/fonts/Montserrat/
中的文件结构:
static/
\_Montserrat-Black.ttf
\_Montserrat-BlackItalic.ttf
\_Montserrat-Bold.ttf
\_Montserrat-BoldItalic.ttf
\_Montserrat-ExtraBold.ttf
\_Montserrat-ExtraBoldItalic.ttf
\_Montserrat-ExtraLight.ttf
\_Montserrat-ExtraLightItalic.ttf
\_Montserrat-Italic.ttf
\_Montserrat-Light.ttf
\_Montserrat-LightItalic.ttf
\_Montserrat-Medium.ttf
\_Montserrat-MediumItalic.ttf
\_Montserrat-Regular.ttf
\_Montserrat-SemiBold.ttf
\_Montserrat-SemiBoldItalic.ttf
\_Montserrat-Thin.ttf
\_Montserrat-ThinItalic.ttf
Montserrat-Italic-VariableFont_wght.ttf
Montserrat-VariableFont_wght.ttf
stylesheet.css
内部/fonts/Montserrat/stylesheet.css
:
@font-face {
font-family: 'Montserrat';
src: url('static/Montserrat-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Montserrat';
src: url('static/Montserrat-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Montserrat';
src: url('static/Montserrat-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Montserrat';
src: url('static/Montserrat-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Montserrat';
src: url('static/Montserrat-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
该字体在网站上显示正确,但在PDF上无法加载:
网页渲染:
PDF渲染:
与之前相同,文本不可选。
我尝试的最后一件事是在文档中查找,特别是搜索font site:pagedjs.org
,但是文档中没有关于字体和可编辑PDF的具体内容。
1条答案
按热度按时间qv7cva1a1#
这可能取决于您使用的浏览器及其PDF打印功能。打印时,您是使用“Adobe PDF”作为打印引擎,还是使用本机的“保存为PDF”选项?
在我使用Paged.js的过程中,加载了自定义字体(Happy Karrik Variable)的
book_avanced-interface
模板具有以下结果:在Firefox上:
关于 chrome :
在基于Chromium / Chromium的浏览器上试用原生的保存to PDF,看看效果如何。它应该会输出你可以选择的文本。