使用CSS3的font-face字體嵌入樣式的方法講解
我要評論對于一個(gè)出色的網(wǎng)頁，字體的選擇是相對關(guān)鍵的，無奈設(shè)計(jì)師必須考慮用戶的本地端是否有相應(yīng)的字體，因此設(shè)計(jì)常常只能使用一些較為大眾化的常見字體，而舍棄更加適合的字體。在 CSS3 中，這一情況將可以改變。CSS3 中引入了 font-face（嵌入字體類型），實(shí)驗(yàn) font-face 可以把需要的字體上傳到自己的服務(wù)器，再在服務(wù)器的網(wǎng)頁中使用該字體并顯示出來，無論瀏覽網(wǎng)頁的用戶的本地端是否有該字體。
語法：
- @font-face { font-family : name ; src : url ( url ) ; sRules }
取值：
name :? 字體名稱。任何可能的 font-family 屬性的值
url ( url ) :? 使用絕對或相對 url 地址指定OpenType字體文件
sRules :? 樣式表定義
說明：
設(shè)置嵌入HTML文檔的字體。此規(guī)則無默認(rèn)值。
此規(guī)則使你能夠在網(wǎng)頁上使用客戶端本地系統(tǒng)上可能沒有的字體。 url 地址必須指向 OpenType 字體文件(.eot或.ote)。此文件包含可以轉(zhuǎn)換為 TrueType 字體的壓縮字體數(shù)據(jù)，可以用來提供HTML文檔使用該字體，或取代客戶端系統(tǒng)已有的同名字體。
示例：
例如下面的效果：
- @font-face {
- font-family: 'vanessalovesyoumedium';
- src: url('vanessalovesyou-webfont.eot');
- src: url('vanessalovesyou-webfont.eot?#iefix') format('embedded-opentype'),
- url('vanessalovesyou-webfont.ttf') format('truetype'),
- font-weight: normal;
- font-style: normal;
- }
- #test-font {
- font-size: 24px;
- }
- #test-font span{
- font-family: vanessalovesyoumedium;
- }
使用 @font-face 定義字體所需要的文件，為了兼容各個(gè)瀏覽器，需要使用多種不同的字體格式，建議至少要有 .eot 和 .ttf 兩種格式，.eot 用于 IE5+ ，.ttf 用于 Chrome 等現(xiàn)代瀏覽器，另外 .otf 也是不錯的選擇，也可以用于現(xiàn)代瀏覽器。
需要注意以下幾點(diǎn)：
1.IE8及更早瀏覽器只支持微軟自有的 .eot 格式
2.IE9.0-10.0部分支持 ttf 和 otf 字體格式
3.現(xiàn)代瀏覽器大多支持 .ttf 和 .otf 兩種格式
4.現(xiàn)代瀏覽器需要從外部引用 @face-font 才能有效，IE 則可以直接在頁面中使用 @face-font
相關(guān)文章
- 這篇文章主要為大家介紹下css下的字體樣式，font的屬性與寫法，需要的朋友可以參考下2014-01-28
css常用樣式font設(shè)置字體的多種變換(實(shí)例詳解)
這篇文章主要介紹了css常用樣式font設(shè)置字體的多種變換,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-19