8

我正在使用 Node.js。一切都很好。我的设计师希望网页使用“Proximanova”字体，这是一种非标准字体。他为我提供了相同字体的 OTF 文件。

如何在服务器上使用此自定义字体？

我检查了一些节点字体包，如 FTPM 和 connect-font，但不清楚是否可以这样做。FTPM 依赖于 Google 字体，但我想使用本地托管的字体。

如果这不能直接完成，你会推荐什么？

4

1 回答 1

16

A：字体资源

确保您拥有在服务器上使用所述字体的许可证。

如果您没有该字体的许可/许可，那么您应该研究它，或者一个合适的替代方案。Google Fonts 和 Font Squirrel 是两个很棒的资源

检查 CDN 上是否存在该字体的现有条目（例如Google Fonts）

如果有可用的通用 CDN 条目，则使用它。

如果没有可用的 CDN，请通过FontSquirrel Generator生成必要的 Web 字体

这将为您提供一个包含各种字体格式的 zip 文件和一个可供使用的示例 CSS。从这里开始，您将希望在您的应用程序中托管上述字体。

B：在 Node.JS 中托管

假设您使用的是 ExpressJS，您需要使用express.static中间件来提供包含静态内容的目录（例如：css、js、字体）

例如：

// GET /static/javascripts/jquery.js
// GET /static/style.css
// GET /static/favicon.ico
app.use('/static', express.static(__dirname + '/public'));

C：其他注意事项

在您的服务器上为您发送的任何字体文件设置正确的 mime 类型非常重要。例如，WOFF 是一种相对较新的格式，许多设置没有开箱即用的 mime 类型。

如果您不是从同一个域提供服务，则最新的 Firefox 版本需要设置 CORS 标头。因此，我建议将Access-Control-Allow-Origin: *标题添加到托管在单独域上的所有 js、css、图像和字体文件（仅用于将来的校对）

网络上有几个可用的类型/字体托管站点。有些具有有限版本的商业字体，或者只有免费/开放许可字体。

D：字体系列

我看到的一个常见错误是人们会为同一字体的不同版本指定不同的字体系列，您只需要适当地指定粗细/样式。

@font-face {
    font-family: 'Open Sans';
    src: url('OpenSans-Regular-webfont.eot');
    src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Regular-webfont.woff') format('woff'),
         url('OpenSans-Regular-webfont.ttf') format('truetype'),
         url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Open Sans';
    src: url('OpenSans-Bold-webfont.eot');
    src: url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Bold-webfont.woff') format('woff'),
         url('OpenSans-Bold-webfont.ttf') format('truetype'),
         url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('OpenSans-Italic-webfont.eot');
    src: url('OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Italic-webfont.woff') format('woff'),
         url('OpenSans-Italic-webfont.ttf') format('truetype'),
         url('OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('OpenSans-BoldItalic-webfont.eot');
    src: url('OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-BoldItalic-webfont.woff') format('woff'),
         url('OpenSans-BoldItalic-webfont.ttf') format('truetype'),
         url('OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg');
    font-weight: bold;
    font-style: italic;
}

如果这是您整个网站的主要字体，并且还有其他种类，您可能希望添加它们，并在需要时指定适当的粗细/样式。只要您涵盖了主要的 4 个，您就应该适合一般用途。

除此之外，请始终指定适当的后备字体。

html,body,div,span,a,li,td,th {
  font-family: 'Open Sans', sans-serif;
}

提示：如果您使用“Arial, Helvetica, ...”，只需使用“sans-serif”，并且应该使用类似于 Helvetica（Windows 上的 Arial）的最合适的平台字体。

于 2013-08-22T00:33:59.527 回答