淺談@font-face

@font-face功能

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

@font-face用途

1.字體文件名簡寫

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

h1{font-family:YT;}

 

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

 

2.使用服務端字體

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

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

 

@font-face瀏覽器兼容

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

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

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

@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 */
}