国产免费又爽又刺激在线观看,免费一级毛片在线播放放视频,最近日本免费观看高清视频,亚洲无码视频观看

<ruby id="cmmwe"></ruby>

  • <var id="cmmwe"></var>
    <b id="cmmwe"></b>
    <source id="cmmwe"><track id="cmmwe"><ins id="cmmwe"></ins></track></source>

      1. 0712-2888027 189-8648-0214
        微信公眾號

        孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號

        當前位置:主頁 > 技術(shù)支持 > HTML5/CSS3 > 使用CSS3 @font-face實現(xiàn)個性化字體

        使用CSS3 @font-face實現(xiàn)個性化字體

        時間:2016-07-04來源:風(fēng)信官網(wǎng) 點擊: 998次
        在網(wǎng)頁中,我們可以用CSS的font-family屬性來定義字體,然而定義的字體在用戶的電腦上能否正確呈現(xiàn)則要看用戶的電腦是否安裝了該字體。我們經(jīng)常能看到國外的一些個人網(wǎng)站使用了非常漂亮的字體,而這些字體通常在用戶的電腦中是沒有安裝的,所以用font-family屬性就無法實現(xiàn)了,今天我們就介紹使用@font-face實現(xiàn)個性化字體。

        CSS3 @font-face

          說@font-face是CSS3的新特性并不準確,因為CSS2就已經(jīng)支持了這一特性,并且Internet Explorer早在第5版的時候就已經(jīng)支持它了,不過IE實現(xiàn)方式是通過自有的eot(Embeded Open Type)字體格式,其它瀏覽器都不支持這個格式。@font-face支持如下屬性:

          font-family:設(shè)置文本的字體名稱。

          font-style:設(shè)置文本樣式。

          font-variant:設(shè)置文本是否大小寫。

          font-weight:設(shè)置文本的粗細。

          font-stretch:設(shè)置文本是否橫向的拉伸變形。

          font-size:設(shè)置文本字體大小。

          src:設(shè)置自定義字體的相對路徑或者絕對路徑。

          @font-face瀏覽器兼容性如下:

        4+ 3.5+ 4+ 3.1+ 10+

        一個簡單例子

          先聲明一個名為ChantelliAntiquaRegular的字體,有一種老的寫法是這樣的:

        ?
        1
        2
        3
        4
        5
        6
        7
        @font-face {
            font-family: "ChantelliAntiquaRegular";
            src: url("Chantelli_Antiqua-webfont.eot");
            src: local("?"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontZjhIjbDc") format("svg");
            font-weight: normal;
            font-style: normal;
        }

          第一個src是兼容IE,第二個src是兼容其它瀏覽器。local("?")是一種hack寫法,避免從客戶端加載字體,這種寫法在Android系統(tǒng)中有BUG,感興趣的同學(xué)可見《Best Practice For @Font-Face CSS Takes A Turn》,改進方案是聲明兩個@font-face,如下:

        ?
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        @font-face {
            font-family: "ChantelliAntiquaRegular";
            src: url("Chantelli_Antiqua-webfont.eot");
        }
         
        @font-face {
            font-family: "ChantelliAntiquaRegular";
            src: url(//:) format("no404"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontMFqI76bT") format("svg");
            font-weight: normal;
            font-style: normal;
        }

          我們首先聲明一個引用eot字體文件的@font-face,以確保它在IE中能正常工作,第二個@font-face引用了多個字體格式是為了兼容其它瀏覽器,它們將按順序查找,直到找到支持的格式,這意味著同一個字體需要有多個格式。url(//:) format("no404")是一種Bulletproof寫法,感興趣的同學(xué)可見《New @Font-Face Syntax: Simpler, Easier》一文。

          其它的HTML和CSS代碼如下:

        ?
        1
        2
        3
        4
        5
        .font-face-display {
            font: 66px ChantelliAntiquaRegular, Helvetica, sans-serif;
        }
         
        <div class="font-face-display">Take me to your heartdiv>

          最重效果如下:

          

        免費字體網(wǎng)站Font Squirrel

          Font Squirrel是一個非常優(yōu)秀的免費字體資源網(wǎng)站,收集了很多高品質(zhì)字體供網(wǎng)頁設(shè)計者免費下載,還有個字體格式生成工具@font-face generator,上傳一個字體文件,可以生成多種字體格式及CSS代碼,非常有用。如果你需要一些優(yōu)秀的免費英文字體,這是個好去處。

          

          想要豐富多彩的頁面就需要有更多的字體樣式,人們想出了很多字體替代方案,除了@font-face方案外還有sIFR、Cufon、Typeface.js等,還有.webfont,簡單說,.webfont 就是在字體中嵌入了訪問許可表,瀏覽器可以讀出這些許可信息,并決定是否應(yīng)該下載和渲染這些字體。另外還有Typekit也是一種值得關(guān)注的方案,將字體放在第三方服務(wù)器上供調(diào)用。這些方案的優(yōu)缺點,將會在以后做詳細的介紹。

        熱門關(guān)鍵詞: CSS3 @font-face 個性化字體
        欄目列表
        推薦內(nèi)容
        熱點內(nèi)容
        展開