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

I am using Nodejs. All is good. My designer wants the webpages to use the 'Proximanova' font, which is a non-standard font. He has provided me the OTF files for the same font.

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

How do I go about using this custom font on the server?

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

I checked out a few node font packages, like FTPM and connect-font, but it wasn't clear if I could do this. FTPM depends on Google fonts, but I want to use my locally hosted fonts.

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

If this can't be done directly, what would you recommend?

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

1 个解决方案

#1

A: Font Assets

Ensure that you have a license to use said font on the server.

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

If you don't have permission/license for the font, then you should look into it, or a suitable alternative. Google Fonts and Font Squirrel are two great resources

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

Check to see if there is an existing entry for said font on a CDN (Such as Google Fonts)

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

If there is a common CDN entry available, then use that.

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

If no CDN is available, generate the necessary web fonts via the FontSquirrel Generator

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

This will give you a zip file with the various font formats and a sample CSS to use. From here, you'll want to host said fonts in your application.

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

B: Hosting in Node.JS

Assuming you are using ExpressJS, you'll want to use the express.static middleware in order to serve up a directory with your static content (ex: css, js, fonts)

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

for example:

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

C: Other Notes

It's important that the proper mime-types are set on your server for any font files you are sending out. WOFF for example is a relatively new format, and many setups do not have the mime type out of the box.

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

The latest Firefox releases require a CORS header to be set if you aren't serving from the same domain. As such I'd suggest adding Access-Control-Allow-Origin: * headers to all js, css, image and font files hosted on a separate domain (just for future proofing)

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

There are several Type/Font hosting sites on the web that are available. Some have limited versions of commercial fonts, or only free/open-license fonts.

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

D: Font Families

A common mistake that I see is people will specify different font families for the different versions of the same font, you only need to specify the weight/style appropriately.

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

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

If this is the primary font for your entire site, and there are other varieties, you may wish to add them specifying the appropriate weight/style if needed. As long as you have the main 4 covered, you should be good for general use.

如果这是整个网站的主要字体,并且还有其他类型,您可能希望添加它们,如果需要,指定适当的重量/样式。只要你有4个主要覆盖,你应该适合一般使用。

Beyond this, always specify an appropriate fallback font.

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

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

TIP: If you are using "Arial, Helvetica, ..." simply use "sans-serif" and the most appropriate platform font similar to Helvetica (Arial on Windows) should be the one that gets used.

提示:如果您使用的是“Arial,Helvetica,...”,只需使用“sans-serif”,最合适的平台字体类似于Helvetica(Windows上的Arial)应该是使用的平台字体。