@font-face與多種字體格式

一、字體與兼容性

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 */
   }

三、獲取字體途徑

https://www.fontsquirrel.com/

四、轉(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

擴(kuò)展

圖標(biāo)字體

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,428評(píng)論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,024評(píng)論 3 413
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,285評(píng)論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,548評(píng)論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,328評(píng)論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 54,878評(píng)論 1 321
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,971評(píng)論 3 439
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,098評(píng)論 0 286
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,616評(píng)論 1 331
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,554評(píng)論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,725評(píng)論 1 369
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,243評(píng)論 5 355
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 43,971評(píng)論 3 345
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,361評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,613評(píng)論 1 280
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,339評(píng)論 3 390
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,695評(píng)論 2 370

推薦閱讀更多精彩內(nèi)容

  • 摘要:本篇文章包括(1)介紹@font-face(2)如何在網(wǎng)頁(yè)中使用@font-face插入特殊字體(3)中文在...
    Masukio閱讀 16,484評(píng)論 0 17
  • 最近興致上來,就想更換了那Blog標(biāo)題字體(漢字的);網(wǎng)上搜索了一番,發(fā)現(xiàn)蘇新詩(shī)柳繁體這款甚合我心;然后就著手搞將...
    晚晴幽草閱讀 2,406評(píng)論 1 8
  • 字體轉(zhuǎn)換工具:fontmin-app在線轉(zhuǎn)換:web-fontmin 本文參考地址:CSS3 @font-face...
    丶Dahl閱讀 781評(píng)論 0 1
  • 標(biāo)簽(空格分隔): CSS3 @font-face的是一個(gè)CSS規(guī)則,允許在網(wǎng)站上使用特定的字體,即使她在訪問者的...
    ahcj_11閱讀 965評(píng)論 0 1
  • 如花的年齡。 好似一段轉(zhuǎn)瞬即逝的風(fēng)景。 誰(shuí)也無法阻擋你短暫的光彩。 你就這么肆意的出現(xiàn)。 二十歲的年齡 一年的時(shí)間...
    一只笨烏龜?shù)娜崭兆x閱讀 139評(píng)論 0 0