css Pagedjs:如何在保持文本可选择/可编辑的同时呈现PDF?

5fjcxozz  于 2023-03-20  发布在  其他
关注(0)|答案(1)|浏览(149)

我正在使用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的具体内容。

qv7cva1a

qv7cva1a1#

这可能取决于您使用的浏览器及其PDF打印功能。打印时,您是使用“Adobe PDF”作为打印引擎,还是使用本机的“保存为PDF”选项?
在我使用Paged.js的过程中,加载了自定义字体(Happy Karrik Variable)的book_avanced-interface模板具有以下结果:
在Firefox上:

  • 保存为PDF:创建带有错误文本样式和重复字形的错误PDF。文本是可选的。
  • AdobePDF:除了默认的webfotns,glyphs不可选择的文本矢量化几乎很好。

关于 chrome :

  • 保存为PDF(本机):打印效果好,文本可选,矢量化效果好
  • Adobe PDF:文本渲染效果不佳,无法选择。

在基于Chromium / Chromium的浏览器上试用原生的保存to PDF,看看效果如何。它应该会输出你可以选择的文本。

相关问题