網(wǎng)頁自定義字體CSS @font-face應(yīng)用及制作

1、網(wǎng)頁自定義字體 CSSfont-face 應(yīng)用及制作網(wǎng)頁設(shè)計之 CSS font-face 應(yīng)用網(wǎng)頁字體自定義 CSS 中 font-face 應(yīng)用，當(dāng)你訪問何實(shí)現(xiàn)的，答案是： font-face 實(shí)現(xiàn)的，為了能讓更多的朋友知道如何使用他，今天我主要把自己的一點(diǎn)學(xué)習(xí)過程貼上來和大家分享。cefont-face font-family: ;src: , *;font-weight: ;font-style: ;取值說明YourWebFontName:此值指的就是你自定義的字體名稱，最好是使用你下載的默認(rèn)字體， 他將被引用到你的Web 元素中的font-family。如“font-family:Y

2、ourWebFontName;” source: 此值指的是你自定義的字體的存放路徑，可以是相對路徑也可以是絕路徑； format：此值 指的是你自定義的字體的格式，主要用來幫助瀏覽器識別，其值主要有以下幾種類型： embeddedopentypeavgweightstyle 兼容瀏覽器說到瀏覽器對font-face 的兼容問題，這里涉及到一個字體format 的問題，因?yàn)椴煌臑g 持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile .otf 字體被認(rèn)為是一種原始的字體格式，其內(nèi)置在TureType 的基礎(chǔ)上，所以

3、也提供了更多 的功能,支持這種字體的瀏覽器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS obileSafari三、 Web Open Font Format(.woff)格式：.woff 字體是 Web 字體中最佳格式，他是一個開放的TrueType/OpenType 的壓縮版本，同 時也支持元數(shù)據(jù)包的分離,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；四、 Embedded Open Type(.eot)格式：.eot 字體是 IE 專用字體，可以從 TrueT

4、ype 創(chuàng)建此格式字體,支持這種字體的瀏覽器有.svg 字體是基于 SVG 字體渲染的一種格式,支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。這就意味著在font-face 中我們至少需要.woff,.eot 兩種格式字體，甚至還需要.svg 等字體 達(dá)到更多種瀏覽版本的支持。使font-face 達(dá)到更多的瀏覽器支持， Paul Irish 寫了一個獨(dú)特的font-face 語法叫 Bulletproof font-face:font-face font-family: YourWebFontName; s

5、rc: url(YourWebFontName.eot?) format(eot);/*IE*/ src:url(YourWebFontName.woff) format(woff),url(YourWebFontName.ttf) format(truetype);/*non-IE*/ 但為了讓各多的瀏覽器支持，你也可以寫成：font-face font-family: YourWebFontName; src: url(YourWebFontName.eot); /* IE9 Compat Modes */ src: url(YourWebFontName.eot?#iefix) form

6、at(embedded-opentype), /* IE6-IE8 */ url(YourWebFontName.woff) format(woff), /* Modern Browsers */url(YourWebFontName.ttf) format(truetype), /* Safari, Android, iOS */url(YourWebFontName.svg#YourWebFontName) format(svg); /* Legacy iOS */ 說了這么多空洞的理論知識，大家一定有點(diǎn)心癢癢了，那么我們先來看看W3CPLUS 首頁 HTML Code:sDemoNeue

7、sBauenDemohfontface 來定義自己的 Web Font:font-face otedopentypeurlfontsneues_bauen_demo-webfont.woff) format(woff),urlfontsneues_bauen_demo-webfont.ttf) format(truetype),url./fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo) format我們實(shí)際頁面中去：h2.neuesDemo 看到上面的效果，我想大家會感到font-face 很神奇，同時也想爭著做做看，可是一動手 有些朋友可能

8、就不知道如何運(yùn)手了，那么我們就帶著這些問題來一個全程完成的實(shí)例吧：二、獲取font-face 所需字體格式：特殊字體已經(jīng)在你的電腦中了，現(xiàn)在我們需要想辦法獲得font-face 所需 來實(shí)現(xiàn)，下面我給大家推薦一款我常用的一個工具fontsquirrel,別的先不多說，首跟我點(diǎn)這里進(jìn)入到下面這個界面吧。如果你進(jìn)入頁面沒有看到上圖，你可以直接點(diǎn)擊導(dǎo)航如果你進(jìn)入頁面沒有看到上圖，你可以直接點(diǎn)擊導(dǎo)航:如果你看到了上面的界面，那就好辦了，我們來看如何應(yīng)用這個工具生成font-face 需要的各種字體，先把我們剛才下載的字體上傳上去：現(xiàn)在從 Font Squirrel 下載下來的文件已經(jīng)保存在你本地的電腦

9、上了，接著只要對他進(jìn)行解壓縮，你就能看到文件列表如下所示：大家可以看到，解壓縮出來的文件格式，里面除了font-face 所需要的字體格式外，還帶 有一個 DEMO 文件，如果你不清楚的也可以參考下載下來的 DEMO 文件，我在這里不對 DEMO 說明問題，我主要是給大家介紹如何把下載下來的文件有價值的運(yùn)用到我們的項(xiàng)目 為了讓項(xiàng)目結(jié)構(gòu)更清晰，我們在項(xiàng)目中單獨(dú)創(chuàng)建一個fonts 目錄，用來放置解壓縮出來 fontface式：現(xiàn)在現(xiàn)在font-face 所需字體已經(jīng)加載到本地項(xiàng)目，現(xiàn)在本地項(xiàng)目中的style.css 中附上我們需要的font-face 樣式font-face urlfontssin

10、glemalta-webfont.woff) format(woff),urlfontssinglemalta-webfont.ttf) format(truetype),url./fonts/singlemalta-webfont.svg#SingleMaltaRegular) format一步了，就是把自己定義的字體應(yīng)用到你的Web 中的 DOM 元素上：h2.singleMalta 看到上面的效果，那大家就知道我們實(shí)現(xiàn)成功了。那么關(guān)于font-face 幫你打造特殊效果的字體，到這里基本上就完成了，我在這里需要提醒使用者：1、如果你的項(xiàng)目中是英文網(wǎng)站，而且項(xiàng)目中的 Logo，Tags 等應(yīng)用到較多的這種特殊字體 效果，我建議你不要使用圖片效果，而使用font-face，但是你是中文網(wǎng)站，我覺得還是使 樣了，因?yàn)橹形淖煮w太大了，這樣會影響到項(xiàng)目的某些性能的優(yōu)化；2、致命的錯誤，你在font-face 中定義時，文件路徑?jīng)]有載對；3、你只定義了font-face，但并沒有應(yīng)用到你的項(xiàng)目中的 DOM 元素上； 因此我給大家提供幾個免費(fèi)字體下載的網(wǎng)址： Webfonts,Typekit,Kernest,Google Web Fonts,Kerne