liAnran

@font-face功能

制作網(wǎng)站難免有些字體不是默認(rèn)的，通過@font-face可以加載自己特定的字體，來實(shí)現(xiàn)特定的文字效果。
@font-face語句是css中的一個功能模塊，用于實(shí)現(xiàn)網(wǎng)頁字體多樣性(設(shè)計者可隨意指定字體，不需要考慮瀏覽者電腦上是否安裝)。主要是把自己定義的Web字體嵌入到你的網(wǎng)頁中，隨著@font-face模塊的出現(xiàn)，我們在Web的開發(fā)中使用字體不怕只能使用Web安全字體，@font-face 不能說他是什么新東西了，在 CSS2.0 規(guī)范中就有了這玩意兒，IE4.0 開始就已經(jīng)出現(xiàn)，只是當(dāng)時用的不是特別廣泛，后來在 CSS2.1 草案中又被刪掉。隨著 web 的急速發(fā)展，@font-face 價值越來越凸顯，然后再次被納入 CSS3 草案中。@font-face規(guī)則 是為了解決由于瀏覽者系統(tǒng)中沒有安裝字體導(dǎo)致不能顯示的問題。

@font-face用途

1.字體文件名簡寫

@font-face {
　　font-family: 'YT';   /*聲明一個名為yt的字體變量*/
　　src: url('YourWebFontName.eot')，local('YourFontName.eot');
}
然后在任何需要使用YT字體的地方就可以直接使用以下：

h1{font-family:YT;}

提示：
a.src屬性定義字體的下載地址，local表示本機(jī)地址，url表示網(wǎng)址（比如使用服務(wù)器上下載的字體）
b.如果在src上定義了多種字體，他們也是候選關(guān)系，如上段代碼
c.如果修改了src中定義的字體或者順序，一定要關(guān)閉瀏覽器再打開才能看到修改后的效果，刷新是看不到的。
d.在@font-face規(guī)則中。font-family的作用是聲明字體變量，與普通選擇器中的font-family是不一樣的。

2.使用服務(wù)端字體

在@font-face規(guī)則中，如果src屬性定義的字體是一個url路徑，則網(wǎng)頁加載時會自動從服務(wù)器下載字體文件，再顯示出來。

@font-face {
    font-family: 'FZCYS';
    src: local('FZYaSongA-B-GB');
    src: url('YourWebFontName.eot');
}

@font-face瀏覽器兼容

由于每種瀏覽器對@font-face的兼容性不同，不同的瀏覽器對字體的支持格式不同，這就意味著在@font-face中我們至少需要.woff,.eot兩種格式字體，甚至還需要.svg等字體達(dá)到更多種瀏覽版本的支持。.TTF或.OTF，適用于Firefox 3.5、Safari、Opera；.EOT，適用于Internet Explorer 4.0+；.SVG，適用于Chrome、IPhone， 獲取要使用字體的三種文件格式，確保能在主流瀏覽器中都能正常顯示該字體。

使用CSS3的@font-face屬性可以實(shí)現(xiàn)在網(wǎng)頁中嵌入任意字體，但是IE只支持微軟自有的EOT格式字體，而其他瀏覽器都不支持這一字體格式，其它瀏覽器可以設(shè)置TTF(TrueType)和OTF(OpenType)兩種字體作為自定義字體

下面要解決的是如何獲取到某種字體的這三種格式文件。一般地，我們在手頭上（或在設(shè)計資源站點(diǎn)已經(jīng)找到）有該字體的某種格式文件，最常見的是.TTF 文件，我們需要通過這種文件格式轉(zhuǎn)換為其余兩種文件格式。字體文件格式的轉(zhuǎn)換可以通過網(wǎng)站FontsQuirrel（http://www.fontsquirrel.com/tools/webfont-generator）或 onlinefontconverter提供的在線字體轉(zhuǎn)換服務(wù)獲取。獲取到三種格式的字體文件后，下一步要在樣式表中聲明該字體，并在需要的地方使用該字體。

@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
         url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}