A：字体资产

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

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

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

如果有可用的常用CDN条目，请使用该条目。

如果没有可用的CDN，请通过FontSquirrel Generator

生成必要的网络字体

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

B：在Node.JS中托管

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

例如：

// 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，图像和字体文件中（仅用于将来的校对）

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

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）应该是被使用的平台字体。

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

1 个答案:

A：字体资产

B：在Node.JS中托管

C：其他笔记

D：字体系列