亚洲无码Aⅴ,视频1页精品,欧美系列一区二区,曰韩色999

首先我們一起來看看@font-face的語法規(guī)則：

   @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主要定義字體樣式，如斜體。

 

普及下各個系統(tǒng)中瀏覽器的字體格式：

 

一、TureTpe(.ttf)格式：

 

.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，
因此他不為網(wǎng)站優(yōu)化,支持這種字體的瀏覽器有
【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

 

二、OpenType(.otf)格式：

 

.otf字體被認為是一種原始的字體格式，其內(nèi)置在TureType的基礎(chǔ)上，
所以也提供了更多的功能,支持這種字體的瀏覽器有
【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

 

三、Web Open Font Format(.woff)格式：

 

.woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，
同時也支持元數(shù)據(jù)包的分離,支持這種字體的瀏覽器有
【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

 

四、Embedded Open Type(.eot)格式：

 

.eot字體是IE專用字體，可以從TrueType創(chuàng)建此格式字體,支持這種字體的瀏覽器有【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啦，不要命名中文哦。