css3 @font-face

starof發表於2015-05-31
CSSS3

很長時間，web設計師總是得用一些“web-safe”字型，英文用body{font-family:"corbel", Arial, Sans-serif;  }中文用body{font-family:"微軟雅黑" }現在@font-face能夠載入伺服器端的字型檔案，讓瀏覽器端可以顯示使用者電腦裡沒有安裝的字型。

原理是：字型檔案放到web伺服器，在需要的時候被自動下載到使用者的計算機上。

一、@font-face介紹

語法：

@font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

引數說明：

YourWebFontName:此值為你自己定義的字型名稱，最好是使用你下載的預設字型名稱，它將被引用到你的web元素的font-family屬性中。

source:自定義字型的存放路徑，可以是相對路徑或絕對路徑。

format:指自定義字型的格式，主要用來幫助瀏覽器識別，其值有以下幾種型別：truetype,opentype,truetype-aat,embedded-opentype,avg等。

font-weight和和font-style就是定義字型是否為粗體，和字型樣式。

瀏覽器相容寫法：

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

二、使用方法

1、下載特殊字型

比如我要下載single-malta.font這個字型，下載字型連結為

http://www.dafont.com/single-malta.font

下載解壓後可以看到一個ttf檔案。

2、用第三方工具生成@font-face所需字型格式，即.eot,.woff,.ttf,.svg字型格式：

第三方工具連結：http://www.fontsquirrel.com/fontface/generator

具體步驟是在WEBFONT GENERATOR頁面上傳第一步下載的字型，然後下載解壓。

下載解壓後發現資料夾有很多多餘的demo頁面和css，我們只需要.woff,.ttf,.svg,.eof四個檔案。把這四個檔案複製到站點的fonts目錄。現在準備工作已經完成了。

3、在style.css中新增@font-face相關程式碼。

4、現在就可以在樣式中用font-familyl。

程式碼如下：

<style type="text/css">
@font-face {
    font-family: 'SingleMaltaRegular';
    src: url(fonts/singlemalta-webfont.eot);
    src: url(fonts/singlemalta-webfont.svg#SingleMaltaRegular)format('svg'),
         url(fonts/singlemalta-webfont.ttf)format('truetype'), 
          url(fonts/singlemalta-webfont.woff)format('woff'), 
          url(fonts/singlemalta-webfont.eot?#iefix)format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}
h2.singleMalta {
    font-family: 'SingleMaltaRegular'
}
</style>

<body>
<h2>普通字型</h2>
<h2 class="singleMalta">single malta</h2>
</body>

效果：

三、資源連結

網頁中匯入特殊字型@font-face屬性詳解

http://www.w3cfuns.com/thread-5597432-1-1.html

獲取字型

第三方生成字型工具

http://www.fontsquirrel.com/fontface/generator

 


 

相關文章