CSS自定义多个字体引用

在 HTML 中，提供给我们的默认字体有很多，但因为在电脑上安装的字体有限，所以很多时候不能呈现出和设计稿上一样的效果，这时候我们就需要使用 css3 提供的 @font-face 来实现个性化字体了。

 

css 样式定义：

@font-face { font-family: "fontname"; src: url(“fontname.woff”) format(“woff”), url(“fontname.ttf”) format(“truetype”), url(“fontname.eot”) format(“embedded-opentype”), url(“fontname.svg”) format(“svg”);
}

 

font-family 为自定义的字体名称，必须；

src 字体文件的引入路径，必须。

 

其中 Firefox、Chrome、Safari 及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 格式的字体，Internet Explorer 9+ 仅支持 .eot (Embedded OpenType) 类型的字体。在得到设计提供的单字体文件后，通过字体生成工具，生成其它需要的格式，字客网提供了在线生成器：

https://www.fontke.com/tool/fontface

然后通过 font-family: "fontname"; 来使用自定义的字体显示。