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