如何在Nodejs服务器上安装自己的字体？

Question

如何在Nodejs服务器上安装自己的字体？

javascriptnode.jsfontsstylesinstallation

10

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

我该如何在服务器上使用这个自定义字体？

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

如果不能直接实现，您有什么建议？

- geeky_monster

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tracker1 · Accepted Answer

A: 字体资源

确保您具有在服务器上使用该字体的许可证。

如果您没有使用该字体的权限/许可证，则应查找它或合适的替代方案。Google Fonts和Font Squirrel是两个很棒的资源。

检查CDN（例如Google Fonts）中是否存在所需字体的条目。

如果存在常见的CDN条目，则使用该条目。

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

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

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;
}

如果这是您网站的主要字体，并且还有其他变体，您可能希望在需要时指定适当的重量/样式来添加它们。只要你覆盖了主要的四种字体，通常使用就会很好。

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

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

提示：如果你正在使用"Arial, Helvetica, ..."，只需使用"sans-serif"，最适合的平台字体类似于Helvetica（Windows上的Arial）应该是被使用的。