CSS3教程(7):CSS3嵌入字體
互聯網 發(fā)布時間：2009-04-02 19:36:26 作者：佚名 
我要評論
我要評論網頁制作Webjx文章簡介：想要制作一些很酷的頭部效果而且擺脫網站安全字體并且不使用圖片文件？那么就使用CSS3嵌入字體吧！
想要制作一些很酷的頭部效果而且擺脫網站安全字體并且不使用圖片文件？那么就使用CSS3嵌入字體吧！
想要制作一些很酷的頭部效果而且擺脫網站安全字體并且不使用圖片文件？那么就使用CSS3嵌入字體吧！
想要制作一些很酷的頭部效果而且擺脫網站安全字體并且不使用圖片文件？那么就使用CSS3嵌入字體吧！
上一篇：CSS3教程(6):創(chuàng)建網站多列
要使用一款字體，我們首先需要使用‘@font-face’屬性。這必須先準備好我們要用的字體文件。
盡管這樣，讓我們簡單的學習一下字體方面的歷史。@font-face屬性從CSS2就已經考慮了，但卻始終在CSS2.1中還沒有出現。CSS3嘗試經它帶到標準中來。
如果你手上沒有字體文件，你可以在dafont.com下載一些。
跨瀏覽器兼容性
目前只有Safari支持@font-face特性(Google Chrome開發(fā)版 2.0.156 也支持這個特性)。
注意，你的瀏覽器需要一些時間加載字體文件，所以，就目前來說，使用圖片文件而不是CSS樣式的用戶體驗會更好些。 CSS3嵌入字體
上面的效果可由下面的樣式實現：
@font-face { font-family: qianduanNet; src: url("SketchRockwell.ttf"); } .fontFace{ font-family: qianduanNet; font-size: 3.2em; letter-spacing: 1px; text-align: center; }
我們也可以對使用font-face的地方使用陰影效果。
.fontFaceShadow{ font-family: qianduanNet; font-size: 3.2em; letter-spacing: 1px; text-align: center; text-shadow: 3px 3px 7px #111; }
瀏覽器支持：
- Firefox(3.05 …)
- Google Chrome(1.0.154 …)
- Google Chrome(2.0.156 …)
- Internet Explorer(IE7, IE8 RC1 )(IE7 支持eot格式的字體文件)
- Opera(9.6 …)(支持文字陰影)
- Safari(3.2.1 windows…)
相關文章
本篇文章主要介紹了CSS3中字體平滑處理和抗鋸齒渲染，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-29- 這篇文章主要介紹了CSS3字體效果的設置方法小結,包括陰影效果、省略號代替以及嵌入字體,需要的朋友可以參考下2016-06-13
- rem是css3新定義的設置字體大小屬性,rem大小都是以html的字體大小設置為參考值進行一個字體大小縮放,下面就帶大家來輕松掌握CSS3中的字體大小單位rem的使用方法:2016-05-24
- CSS3中的font-face可以將我們上傳的自定義的字體顯示出來,有時比如我們要顯示英文音標的字體時便需要用到,本文就整理了一下使用CSS3的font-face字體嵌入樣式的方法講解,需2016-05-13
- 最近在整理學習CSS3的一些小知識，現在已經整理了CSS3選擇器，CSS3圓角和CSS3元素陰影屬性的使用方法了。今天為大家整理一下CSS3中的字體陰影——text-shadow的使用方法。2016-01-08
- 今天給大家分享一款純css3實現的顏色漸變按鈕，這款按鈕的邊框和文字的顏色通過css3實現兩種顏色的漸變，清新淡雅，效果非常好看，需要的朋友可以參考下2014-11-12
- 這篇文章主要介紹了css3 自定義字體font-face使用，需要的朋友可以參考下2014-05-14
- 傳說中的CSS3基本上什么都可以，那么CSS3中可不可以自定義英文字體呢?答案是非常可以。用@font-face即可實現自定義英文字體，下面有個不錯的示例，感興趣的朋友可以了解下2013-09-23
CSS3+font字體文件實現圓形半透明菜單具體步驟(圖解)
今天就從一個簡單的圓形菜單的實現，使用CSS3+font字體文件實現圓形菜單，下面來總結一些最近學習的收獲，感興趣的朋友可以參考下哈2013-06-03- 3D字體而且還帶有陰影，這種效果想必大家只有認為一些高級的作圖工具才可以實現的吧，css3的出現讓這一切看似不可能的實現成為可能，接下來為大家介紹下3D字體帶陰影效果的2013-03-20
