使用CSS3 font face實現個性化字型

2021-07-27 14:46:27 字數 1470 閱讀 5382

在網頁中,我們可以用css的font-family屬性來定義字型,然而定義的字型在使用者的電腦上能否正確呈現則要看使用者的電腦是否安裝了該字型。我們經常能看到國外的一些個人**使用了非常漂亮的字型,而這些字型通常在使用者的電腦中是沒有安裝的,所以用font-family屬性就無法實現了,今天我們就介紹使用@font-face實現個性化字型。

說@font-face是css3的新特性並不準確,因為css2就已經支援了這一特性,並且internet explorer早在第5版的時候就已經支援它了,不過ie實現方式是通過自有的eot(embeded open type)字型格式,其它瀏覽器都不支援這個格式。@font-face支援如下屬性:

font-family:設定文字的字型名稱。

font-style:設定文字樣式。

font-variant:設定文字是否大小寫。

font-weight:設定文字的粗細。

font-stretch:設定文字是否橫向的拉伸變形。

font-size:設定文字字型大小。

src:設定自定義字型的相對路徑或者絕對路徑。

@font-face
第乙個src是相容ie,第二個src是相容其它瀏覽器。local("☺")是一種hack寫法,避免從客戶端載入字型,這種寫法在android系統中有bug,感興趣的同學可見《

best practice for @font-face css takes a turn

》改進方案是宣告兩個@font-face,如下:

@font-face 

@font-face

我們首先宣告乙個引用eot字型檔案的@font-face,以確保它在ie中能正常工作,第二個@font-face引用了多個字型格式是為了相容其它瀏覽器,它們將按順序查詢,直到找到支援的格式,這意味著同乙個字型需要有多個格式。url(//:) format("no404")是一種bulletproof寫法,感興趣的同學可見《new @font-face syntax: ******r, easier》一文。

其它的html和css**如下:

1

2

3

4

5

.font-face-display

<divclass="font-face-display">take me to your heart

最重效果如下:

CSS3 font face使用例項

windows10作業系統使用例項 1.準備好對應格式的字型庫 2.方正字型使用例項 中文內容 p br p class txttwo abc p body html ie下顯示結果 google ff下顯示結果 android系統下的瀏覽器訪問 3.花紋行楷字型使用 中文內容 p br p cla...

CSS3 font face詳細用法

font face是css3中的乙個模組,他主要是把自己定義的web字型嵌入到你的網頁中,隨著 font face模組的出現,我們在web的開發中使用字型就不用再為只能使用web安全字型煩惱了!肯定會有人問,這樣的東西ie能支援嗎?我告訴大家 font face這個功能其實早在ie4就支援了,你肯定...

使用CSS3 font face實現個性化字型

在網頁中,我們可以用css的font family屬性來定義字型,然而定義的字型在使用者的電腦上能否正確呈現則要看使用者的電腦是否安裝了該字型。我們經常能看到國外的一些個人 使用了非常漂亮的字型,而這些字型通常在使用者的電腦中是沒有安裝的,所以用font family屬性就無法實現了,今天我們就介紹...