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