定義自訂字體需要css的什麼規則

定義自訂字體需要css的「@font-face」規則。 「@font-face」規則主要是將使用者自訂的網路字體嵌入到網頁中，語法「@font-face{font-family: '字體名稱';src:url('檔案位址');}」。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

如何能讓自己的頁面支援自訂字體，一句話就是使用@font-face實現的。

@font-face是CSS3中的一個模組，他主要是把自己定義的Web字體嵌入到你的網頁中，隨著@font-face模組的出現，我們在Web的開發中使用字體不怕只能使用Web安全字體。下面我們就來了解一下@font-face使用方法。

首先我們一起來看看@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主要定義字體樣式，如斜體。

相容瀏覽器

說到瀏覽器對@font-face的相容問題，這裡涉及到一個字體format的問題，因為不同的瀏覽器對字體格式支援是不一致的，這樣大家有必要了解一下，各種版本的瀏覽器支援什麼樣的字體，前面也簡單帶到了有關字體的幾種格式，下面我就分別說一下這個問題，讓大家心裡有個概念：

一、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達到更多的瀏覽器支持，Paul Irish

寫了一個獨特的@font-face語法叫

Bulletproof @font-face :

   @font-face {
	font-family: 'YourWebFontName';
	src: url('YourWebFontName.eot?') format('eot');/*IE*/
	src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
   }

但為了讓各多的瀏覽器支持，你也可以寫成：

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

說了這麼多空洞的理論知識，大家一定有點心癢癢了，那麼我們先來看看W3CPLUS首頁中導航部分的蘭色字體是如何實現的，假如我們有一個這樣的DOM標籤，需要應用自訂字體：

######HTML Code:#######

   <h2 class="neuesDemo">Neues Bauen Demo</h2>

###透過@font-face定義自己的Web Font:###

  @font-face {
    font-family: 'NeuesBauenDemo';
    src: url('../fonts/neues_bauen_demo-webfont.eot');
    src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/neues_bauen_demo-webfont.woff') format('woff'),
	url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'),
	url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg');
    font-weight: normal;
    font-style: normal;
  }

###我在這裡採用的是相對路徑，當然大家也可以使用絕路徑。到這裡我們就需要把定義好的字體應用到我們實際頁面中去：###

   h2.neuesDemo {
      font-family: 'NeuesBauenDemo'
   }

######效果：##################（學習影片分享：###css影片教學###）###

以上是定義自訂字體需要css的什麼規則的詳細內容。更多資訊請關注PHP中文網其他相關文章！