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

Question

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

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

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

如果不能直接这样做,你会推荐什么？

Answer 1

答:字体资产

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

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

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

如果有可用的通用CDN条目,则使用该条目.

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

这将为您提供一个包含各种字体格式和示例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)应该是使用的平台字体.