首先我們一起來看看@font-face的語法規則：
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
取值說明
1、YourWebFontName:此值指的就是你自定義的字體名稱，最好是使用你下載的默認字體，
他將被引用到你的Web元素中的font-family。如"font-family:"YourWebFontName";"
2、source:此值指的是你自定義的字體的存放路徑，可以是相對路徑也可以是絕路徑；
3、format：此值指的是你自定義的字體的格式，主要用來幫助瀏覽器識別，
其值主要有以下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
4、weight和style:這兩個值大家一定很熟悉，weight定義字體是否為粗體，
style主要定義字體樣式，如斜體。
普及下各個系統中瀏覽器的字體格式：
一、TureTpe(.ttf)格式：
.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，
因此他不為網站優化,支持這種字體的瀏覽器有
【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
二、OpenType(.otf)格式：
.otf字體被認為是一種原始的字體格式，其內置在TureType的基礎上，
所以也提供了更多的功能,支持這種字體的瀏覽器有
【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
三、Web Open Font Format(.woff)格式：
.woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，
同時也支持元數據包的分離,支持這種字體的瀏覽器有
【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
四、Embedded Open Type(.eot)格式：
.eot字體是IE專用字體，可以從TrueType創建此格式字體,支持這種字體的瀏覽器有【IE4+】；
五、SVG(.svg)格式：
.svg字體是基于SVG字體渲染的一種格式,支持這種字體的瀏覽器有
【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
這就意味著在@font-face中我們至少需要.woff,.eot兩種格式字體，
甚至還需要.svg等字體達到更多種瀏覽版本的支持。
為了讓更多的瀏覽器支持大家可以使用下面的寫法：
@font-face {
font-family: ’你的字體名字’;
src: url(’你的字體名字.eot’); /* IE9 Compat Modes */
src: url(’你的字體名字.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(’你的字體名字.woff’) format(’woff’), /* Modern Browsers */
url(’你的字體名字.ttf’) format(’truetype’), /* Safari, Android, iOS */
url(’你的字體名字.svg#YourWebFontName’) format(’svg’); /* Legacy iOS */
}
使用的時候替換寫法中的’你的字體名字’對于你自己的字體名字就ok啦，不要命名中文哦。
【 微信掃一掃 】
