DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> css3中的@font-face制作圖標字體icofont
css3中的@font-face制作圖標字體icofont
編輯:CSS進階教程     

網頁制作Webjx文章簡介:ICOFONT制作常用社交圖標。

icofont為何物?圖標字體也。圖標和字體怎能混為一談呢?icofont就是用font-family來實現icon,主要用到了css3中的@font-face。

實現我們來熟悉一下@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’規則首先定義在 CSS2 規范中,但是在 CSS2.1 中被刪除,目前又被納入到 CSS3 推薦草案中,所以不用擔心IE系列,從IE4開始就支持這一屬性了,並且現在一些主流的浏覽器(Chrome 1+/Firefox 3.5+/Safari 3.1+/iOS 3.1+/Opera 10+)也都支持。

字體格式:

說到浏覽器對@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中我們至少需要.ttf,.eot兩種格式字體,甚至還需要.svg等字體達到更多種浏覽版本的支持。
舉個栗子:

在font-face的應用中,由於中文字體文件過大,並不常用。如果需要英文字體的話,推薦大家用google的Google Web Fonts https://www.google.com/webfonts .
但可以使用font-face制作一些小圖標,效果極好。

icoMoon 使用方法

推薦使用一個icofont的網站 icomoon
首先進入網站選擇 icoMoon App ,start the App.

然後選擇需要使用的圖標,選擇下一步。
最後將所需的圖標重新自定義命名,下載自定義後的文件。
文件中包括了各種字體。
現在就可以使用酷酷的icofont了。

使用說明:

@font-face {font-family: 'icofoont';src: url('icofont.eot');src:url('icofont.ttf')  format('truetype');  }
 span{font-family: 'icofoont';font-size:30px;padding:10px;}
<div>
  <span>a</span>
  <span style="color:#3F5CA2">b</span>
  <span style="color:#D2462F">c</span>
  <span style="color:#215676">d</span>
  <span style="color:#31B5F5">e</span>
  <span style="color:#d6d6d6">f</span>
  <span style="color:#b4ea5d">g</span>
  <span style="color:#00ADEF">h</span>
  <span style="color:#F47E24">i</span>
</div>


最後上效果圖
奉上優雅的 DOME

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved