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"; 来使用自定义的字体显示。