ruby-on-rails-4 - PDFKit 不显示自定义字体

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

不要使用 ;除非你已经完成了规则的声明。这里的通用 CSS 格式是:

selector {
  propname: val1, val2, val3;
}

所以你用 ,对于多个值，然后只在最后一个 ; .你写的内容是这样的:

selector {
  src: some value;
  src: some *overwriting* value;
}

只需使用常规范式声明您的 @font-face ，它应该可以正常工作:

@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");
  }

(请注意，对于“woff”案例，您还缺少 ))

但是，如果您的目标是现代浏览器，则没有理由使用 eot了。 IE9+ 和其他一切都支持 woff正好。实际上，WOFF 是一个压缩的 opentype 包装器；支持 opentype 的浏览器也支持 WOFF，所以尝试加载 WOFF 和 ttf 或 otf 是没有意义的:见 http://caniuse.com/woff