【问题标题】:Fonts are not taking with the same font-family name using wkhtmltopdf使用 wkhtmltopdf 字体不采用相同的字体系列名称
【发布时间】:2014-03-03 06:28:46
【问题描述】:

从下面的 url 可以知道 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 而不是本地字体。 第二件事是我不想将字体下载到我的系统并使用它,而只想使用 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”时......它的呈现正确。相同的字体系列名称会出现什么问题?

【问题讨论】:

    标签: html css fonts wkhtmltopdf


    【解决方案1】:

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

    【讨论】:

    • 我认为如果它真的有效(所以自己测试)会更有帮助,而不是仅仅发布链接。尽管对 wkhtmltopdf 的改进工作受到了极大的尊重和赞赏。
    猜你喜欢
    • 2013-11-23
    • 1970-01-01
    • 1970-01-01
    • 2020-08-30
    • 2016-02-14
    • 1970-01-01
    • 1970-01-01
    • 2013-10-01
    • 1970-01-01
    相关资源
    最近更新 更多