html - 使用 wkhtmltopdf 时字体不采用相同的字体系列名称

Question

从以下网址得知wkhtmltopdf只使用ttf格式字体。 use custom fonts with wkhtmltopdf Google Web Fonts and PDF generation from HTML with wkhtmltopdf

我的网站只使用 woff，因此我使用用户样式表来添加 ttf 字体。我正在使用许多谷歌字体，如 Oxygen、Inconsolata、Open Sans、merriweather 等，方法是在用户样式表中使用相同的字体系列名称并正确渲染。 但问题在于字体“Open Sans Condensed”和“sorts mill goudy”。当我尝试用其他名称更改字体系列名称时，它正确呈现的名称并不完全相同。 我想使用相同的名称并且不想更改变量名称，因为我想使用网络字体而不是本地字体。 第二件事是我不想将字体下载到我的系统并使用它，而只想使用 webfonts。 我使用 userstylesheet 的方式是这样的

@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
src: url('https://googlefontdirectory.googlecode.com/hg-history/829b7e77062a1a06dfc90c29f0f413e2a1de44fe/inconsolata/Inconsolata.ttf') format('truetype');

}

@font-face {
font-family: "sorts mill goudy";
font-style: normal;
font-weight: 400;
src: url('https://googlefontdirectory.googlecode.com/hg-history/73427626e72275f857e7fdfd29e0a5c52516fed5/sortsmillgoudy/SortsMillGoudy-Regular.ttf')      format('truetype');
/*
src: url('https://bienvenidod-fonts.googlecode.com/hg-history/73427626e72275f857e7fdfd29e0a5c52516fed5/sortsmillgoudy/SortsMillGoudy-Regular.ttf')     format('truetype');*/
}

@font-face {
font-family: 'Sorts Mill Goudy';
font-style: italic;
font-weight: 400;
src: url('https://googlefontdirectory.googlecode.com/hg-history/73427626e72275f857e7fdfd29e0a5c52516fed5/sortsmillgoudy/SortsMillGoudy-Italic.ttf') format('truetype');
}

 @font-face {
 font-family: 'Merriweather';
 font-style: normal;
 font-weight: 300;
 src: url('https://jenniferespencer-webfont.googlecode.com/hg-history/0ab6594f99d5904bb834e02e43d1d536c87f8622/merriweather/Merriweather-Light.ttf') format('truetype');
 }
 @font-face {
 font-family: 'Merriweather';
 font-style: normal;
 font-weight: 400;
 src: url('https://jenniferespencer-webfont.googlecode.com/hg-history/0ab6594f99d5904bb834e02e43d1d536c87f8622/merriweather/Merriweather-Regular.ttf') format('truetype');
 }
 @font-face {
 font-family: 'Merriweather';
 font-style: normal;
 font-weight: 700;
 src: url('https://jenniferespencer-webfont.googlecode.com/hg-history/0ab6594f99d5904bb834e02e43d1d536c87f8622/merriweather/Merriweather-Bold.ttf') format('truetype');
 }

 @font-face {
 font-family: 'Open Sans Condensed';
 font-style: normal;
 font-weight: 400;
 src: url('http://testinghtmltopdf.site40.net/fonts/OpenSans-CondLight.ttf') format('truetype');
 }


 @font-face {
 font-family: 'Open Sans Condensed';
 font-style: normal;
 font-weight: bold;
 src: url('http://testinghtmltopdf.site40.net/fonts/OpenSans-CondBold.ttf') format('truetype');
 }

 @font-face {
 font-family: 'Open Sans Condensed';
 font-style: italic;
 font-weight: 300;
 src: url('http://testinghtmltopdf.site40.net/fonts/OpenSans-CondLightItalic.ttf') format('truetype');
 }
 @font-face {
 font-family: "open sans";
 font-weight: 400;
 font-style: normal;
   src:url('http://themes.googleusercontent.com/static/fonts/opensans/v7/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype');
 }


 @font-face {
 font-family: "open sans";
 font-weight: 700;
 font-style: normal;
 src:     url('http://themes.googleusercontent.com/static/fonts/opensans/v7/k3k702ZOKiLJc3WVjuplzInF5uFdDttMLvmWuJdhhgs.ttf') format('truetype');
 }

 @font-face {
 font-family: "open sans";
 font-weight: 700;
 font-style: italic;
 src:      url('http://themes.googleusercontent.com/static/fonts/opensans/v7/PRmiXeptR36kaC0GEAetxp_TkvowlIOtbR7ePgFOpF4.ttf') format('truetype');
 }


 @font-face {
 font-family: "open sans";
 font-weight: 800;
 font-style: italic;
 src:     url('http://themes.googleusercontent.com/static/fonts/opensans/v7/PRmiXeptR36kaC0GEAetxlDMrAYtoOisqqMDW9M_Mqc.ttf') format('truetype');
 }

下面是我在网站中使用源代码的方式

 @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Droid+Sans+Mono);

 @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);

 @import url(http://fonts.googleapis.com/css?family=Bree+Serif);

 @import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic);

 @import url(http://fonts.googleapis.com/css?family=Philosopher:400,700,400italic,700italic|Droid+Sans+Mono|Roboto+Condensed:300italic,400italic,700italic,400,300,700|Roboto:400,100,300,100italic,300italic,400italic,500,500italic,700,700italic,900,900italic|EB+Garamond);

 @import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700);

 @import url(http://fonts.googleapis.com/css?family=Dancing+Script:400,700);

 @import url(http://fonts.googleapis.com/css?family=Oxygen:400,300,700&subset=latin,latin-ext);

 @import url(http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic);

 @import url(http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy:400,400italic);

 @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);

当我试图在用户样式表和源代码中将字体系列名称从“sorts mill goudy”更改为“sorts mill goudyy”时......它的渲染正确。相同的字体系列名称会出现什么问题？

Answer 1

你可以尝试使用latest version (0.12)支持 WOFF 字体。