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"; 來使用自定義的字體顯示。