CSS3用@font-face實現自定義英文字體

2024-07-11 08:28:18

字體：大中小

來源：轉載

供稿：網友

現在CSS3已經很流行了。傳說中的CSS3基本上什么都可以，那么CSS3中可不可以自定義英文字體呢?答案是非常可以。用@font-face即可實現自定義英文字體，下面咱們一起去看看吧。

1、語法規則

復制代碼

代碼如下:
@font-face {
font-family: 自定義的字體名稱;
src: 自定義的字體的存放路徑;
font-weight: normal;是否為粗體
font-style: normal;定義字體樣式，如斜體
}

2、取值說明

(1)font-famliy:此值指的就是你自定義的字體名稱，最好是使用你下載的默認字體，他將被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”

(2)source:此值指的是你自定義的字體的存放路徑，可以是相對路徑也可以是絕路徑;

(3)format：此值指的是你自定義的字體的格式，主要用來幫助瀏覽器識別，其值主要有以下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等;

(4)weight和style:這兩個值大家一定很熟悉，weight定義字體是否為粗體，style主要定義字體樣式，如斜體。

3、各個瀏覽器需要字體的格式

(1)TureTpe(.ttf)格式：

.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，因此他不為網站優化,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;

(2)OpenType(.otf)格式：

.otf字體被認為是一種原始的字體格式，其內置在TureType的基礎上，所以也提供了更多的功能,支持這種字體的瀏覽器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;

(3)Web Open Font Format(.woff)格式：

.woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;

(4)Embedded Open Type(.eot)格式：

.eot字體是IE專用字體，可以從TrueType創建此格式字體,支持這種字體的瀏覽器有【IE4+】;

(5)SVG(.svg)格式：

.svg字體是基于SVG字體渲染的一種格式,支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

所以，@font-face中我們至少需要.woff,.eot兩種格式字體，甚至還需要.svg等字體達到更多種瀏覽版本的支持。

4、綜合寫法

復制代碼

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

上一篇：css中ul li的背景小圖標屬性設置的兩種情況

下一篇：純CSS3實現帶動畫效果導航菜單無需js

發表評論

共有條評論