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

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

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

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

如果没有可用的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.

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)应该是使用的平台字体.