Question

我想在我的Rails应用程序中使用带有PDFKit的html生成的pdf中使用自定义字体。我在... app / assets / fonts /中添加了字体，并将其包含在我的html模板中：

css:
  @font-face {
    font-family: 'journal';
    src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.eot')});
    src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.woff')} format("woff")),
         url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.ttf')}) format("truetype");
  }

在css中调用它：

h1 {font-family: journal; }

Answer 1

除非您已完成声明规则，否则请勿使用;。{p>不要使用

selector {
  propname: val1, val2, val3;
}

。这里的通用CSS格式是：

因此，您使用;表示多个值，然后仅使用selector { src: some value; src: some *overwriting* value; }的最后一个值。你所写的是这样做的：

@font-face {
  font-family: 'journal';
  src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.eot')}),
       url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.woff')}) format("woff")),
       url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.ttf')}) format("truetype");
  }

只需使用常规格式声明@ font-face，它应该可以正常工作：

（请注意，对于＆＃34; woff＆＃34;案例，你也错过了eot

但是，如果您要定位现代浏览器，则没有理由再使用woff。 IE9 +和其他一切支持{{1}}就好了。事实上，WOFF是一个压缩的opentype包装器;支持opentype的浏览器也支持WOFF，因此尝试加载WOFF 和 ttf或otf毫无意义：请参阅http://caniuse.com/woff

Answer 2

@font-face {
     font-family: 'journalregular';
     src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal-webfont.eot')});
 }

@font-face {
     font-family: 'journalregular';
     src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal-webfont.woff')}) format('woff');
 }

@font-face {
     font-family: 'journalregular';
     src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal-webfont.ttf')}) format('truetype');
 }

@font-face {
     font-family: 'journalregular';
     src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal-webfont.svg#journalregular')}) format('svg');
}

@font-face {
     font-family: 'journalregular';
     font-weight: normal;
     font-style: normal;
}

这似乎解决了这个问题。另外，我需要称之为：

h1 { font-family: 'journalregular'; }

PDFKit不显示自定义字体

2 个答案: