一、字體與兼容性
1. TureTpe(.ttf)格式:
.ttf字體是Windows和Mac的最常見的字體,是一種RAW格式,因此他不為網(wǎng)站優(yōu)化,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;
2. OpenType(.otf)格式:
.otf字體被認(rèn)為是一種原始的字體格式,其內(nèi)置在TureType的基礎(chǔ)上,所以也提供了更多的功能,支持這種字體的瀏覽器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS
Mobile Safari4.2+】;
3. Web Open Font Format(.woff)格式:
.woff字體是Web字體中最佳格式,他是一個(gè)開放的TrueType/OpenType的壓縮版本,同時(shí)也支持元數(shù)據(jù)包的分離,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;
4. Embedded Open Type(.eot)格式:
.eot字體是IE專用字體,可以從TrueType創(chuàng)建此格式字體,支持這種字體的瀏覽器有【IE4+】;
5. SVG(.svg)格式:
.svg字體是基于SVG字體渲染的一種格式,支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
二、@font-face
為了使@font-face達(dá)到更多的瀏覽器支持,Paul Irish寫了一個(gè)獨(dú)特的@font-face語(yǔ)法叫Bulletproof @font-face:
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot?#iefix') 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') format('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 */
}
三、獲取字體途徑
四、轉(zhuǎn)換字體格式
http://www.freefontconverter.com/
http://font2web.com/
http://www.youziku.com/
五、中文字體
因?yàn)橹形淖煮w比較大,要用其他方法才能實(shí)現(xiàn),可以參考有字網(wǎng)。
參考文章:
http://www.phpvar.com/archives/2663.html
http://www.w3cplus.com/content/css3-font-face