node.js - 在 ghost 安装中引用 @fontface

Question

我刚刚使用 http://fontello.com/ 生成了一个个性化的字体 - 真棒

当我尝试在我的 Ghost 安装中引用它时，文件总是返回 404。这是我所做的:

1. 我在/content/themes/[theme name]/assets/fonts 文件夹中添加了生成的字体文件的完整文件夹

2. 我从 default.hbs 引用主 .css 文件

像这样:

<link rel="stylesheet" type="text/css" href="{{asset "fonts/custom_webfont.css"}}">

这个 .css 文件有一个指令，允许不同的浏览器为所提供的字体选择支持的文件类型:

@font-face {
  font-family: 'custom_webfont';
  src: url('custom_webfont.eot');
  src: url('custom_webfont.eot#iefix') format('embedded-opentype'),
       url('custom_webfont.woff') format('woff'),
       url('custom_webfont.ttf') format('truetype'),
       url('custom_webfont.svg#custom_webfont') format('svg');
  font-weight: normal;
  font-style: normal;
}

当我的 ghost 安装上的任何页面被渲染时，它正确地为这个地址提供 CSS:

/assets/fonts/custom_webfont.css?v=594627dbc0(我假设额外的 v 号用于缓存目的)

但是没有提供任何字体文件。如果我尝试这些 URL 中的任何一个，都找不到任何东西:

http://localhost:2368/assets/fonts/custom_webfont.woff/?v=594627dbc0
http://localhost:2368/assets/fonts/custom_webfont.woff
http://localhost:2368/assets/fonts/custom_webfont.eof/?v=594627dbc0
http://localhost:2368/assets/fonts/custom_webfont.eof

Answer 1

可能我迟到了这个问题，但值得一试!

我很确定你构建的路径是错误的。像这样尝试:

rel="stylesheet"type="text/css"href="{{asset}}/fonts/custom_webfont.css">

这对我有用!