javascript 如何在 Nodejs 服务器上安装我自己的字体？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18369600/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I install my own fonts on Nodejs Server?
提问by geeky_monster
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.
我正在使用 Node.js。一切都很好。我的设计师希望网页使用“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?
如果这不能直接完成，你会推荐什么？
回答by Tracker1
A: Font Assets
A：字体资源
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 Fonts）
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.
这将为您提供一个包含各种字体格式的 zip 文件和一个示例 CSS 以供使用。从这里开始，您将希望在您的应用程序中托管所述字体。
B: Hosting in Node.JS
B：在 Node.JS 中托管
Assuming you are using ExpressJS, you'll want to use the express.staticmiddleware in order to serve up a directory with your static content (ex: css, js, fonts)
假设您使用 ExpressJS，您将需要使用express.static中间件来提供包含静态内容的目录（例如：css、js、字体）
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
C: 其他注意事项
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.
网络上有几个可用的类型/字体托管站点。有些具有商业字体的有限版本，或者只有免费/开放许可字体。
D: Font Families
D：字体系列
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）的平台字体应该是最常用的字体。
