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

2021-05-28 12:34:07 字數 1093 閱讀 8525

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

語法:@font-face

取值:font-family:

設定文字的字型名稱。

font-style:

設定文字樣式。

font-variant:

設定文字是否大小寫。

font-weight:

設定文字的粗細。

font-stretch:

設定文字是否橫向的拉伸變形。

font-size:

設定文字字型大小。

src:

設定自定義字型的相對路徑或者絕對路徑,注意,此屬性只能在@font-face規則裡使用。

說明:@font-face 能夠載入伺服器端的字型檔案,讓客戶端顯示客戶端所沒有安裝的字型。【微軟的ie5已經是開始支援這個屬性,但是只支援微軟自有的.eot (embedded open type)格式,而其他瀏覽器直到現在都沒有支援這一字型格式。然而,從safari3.1開始,網頁重構工程師已經可以設定.ttf(truetype)和.otf(opentype)兩種字型做為自定義字型了。】

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

**與例項

這是測試內容,it is very well!

"div2">這是測試內容,it is very well!

執行結果:

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屬性就無法實現了,今天我們就介紹...