這篇文章主要為大家展示了“css中如何引入外部字體”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css中如何引入外部字體”這篇文章吧。

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比黟縣網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式黟縣網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋黟縣地區(qū)。費(fèi)用合理售后完善，10余年實(shí)體公司更值得信賴。

    一、font-family屬性的作用與用法？

    1.font-family屬性的作用

    font-family屬性就是可以用css代碼設(shè)置頁(yè)面上文字顯示的字體樣式，例如：宋體，微軟雅黑等等。font-family屬性設(shè)置不同的字體，可以讓頁(yè)面顯示效果更協(xié)調(diào)美觀。

    font-family屬性可以定義多個(gè)值（字體），用逗號(hào)隔開(kāi)。如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)，直到有一個(gè)可識(shí)別的。瀏覽器會(huì)使用它可識(shí)別的第一個(gè)值。

    2.font-family屬性的用法

    font-family:"設(shè)置字體名稱";

    例：

    css代碼：

    .demo{font-family:"微軟雅黑";}

    html代碼：

    <divclass="demo">我是一段測(cè)試文字</div>

    這樣在demo盒子里的所有文字都會(huì)以微軟雅黑的字體樣式顯示。

    二、CSS怎么引入外部字體？

    一般瀏覽器常用的字體包括：宋體、黑體、微軟雅黑等幾種。因?yàn)榫W(wǎng)頁(yè)載入選擇字體時(shí)候是調(diào)用訪問(wèn)者系統(tǒng)文字庫(kù)的文字字體，如果沒(méi)有找到字體那將顯示默認(rèn)的網(wǎng)頁(yè)字體。而每個(gè)人安裝的操作系統(tǒng)默認(rèn)有這幾種字體，所以這些字體又稱為安全字體。但為了一些特殊的需要，顯示有個(gè)性化的、好看的文字樣式，我們可以引用一些外部字體。

    CSS引入外部字體的方法（@font-face）：

    1.@font-face標(biāo)簽介紹

    @font-face允許您在網(wǎng)頁(yè)中使用電腦中沒(méi)有安裝的字體，完全擺脫安全字體的限制。只需將字體包安裝在服務(wù)器上，當(dāng)用戶加載網(wǎng)頁(yè)時(shí)，字體包會(huì)自動(dòng)下載到用戶機(jī)器上，保證字體能夠正確渲染。

    2.CSS引入外部字體的步驟

    1）在CSS中引入字體并給外部字體自定義一個(gè)名稱

    @font-face{

    /*font-properties*/

    font-family:用戶自定義的字體名稱;

    src:url('加載外部字體文件的文件地址'),

    url('加載外部字體文件的文件地址'),

    url('加載外部字體文件的文件地址');/*IE9*/

    }

    font-family定義字體的名字，接下來(lái)的src是加載字體文件的位置，之所有有多個(gè)url就是因?yàn)闉g覽器兼容問(wèn)題。

    2）使用剛剛定義的字體

    div{

    font-family:用戶自定義的字體名稱;

    }

    代碼實(shí)例：

    @font-face{

    font-family:'YaHeiConsolasHybrid';

    src:url('../fonts/yaheiconsolashybrid.ttf');

    }

    body{

    font-family:'YaHeiConsolasHybrid';

    font-size:16px;

    }

    考慮到不同瀏覽器字體的格式有差別（兼容瀏覽器）

    /*字體后綴和瀏覽器有關(guān)，如下所示

    *.TTF或.OTF，適用于Firefox3.5、Safari、Opera

    *.EOT，適用于InternetExplorer4.0+

    *.SVG，適用于Chrome、IPhone

    */

    @font-face{

    font-family:'HansHandItalic';

    src:url('fonts/hanshand-webfont.eot');

    src:url('fonts/hanshand-webfont.eot?#iefix')format('embedded-opentype'),

    url('fonts/hanshand-webfont.woff')format('woff'),

    url('fonts/hanshand-webfont.ttf')format('truetype'),

    url('fonts/hanshand-webfont.svg#webfont34M5alKg')format('svg');

    font-weight:normal;

    font-style:normal;

    }

    3.CSS引入外部字體的好處：

    隨著@font-face的不斷流行，產(chǎn)生了許多新的字體格式圖標(biāo)集，稱為網(wǎng)絡(luò)字體。這些網(wǎng)絡(luò)字體較平常的安全字體有以下的優(yōu)點(diǎn)：

    1）使用的是真正的文本，而不是圖片，放大和縮小都不會(huì)影響渲染效果，用戶體驗(yàn)好；

    2）可以被搜索引擎辨認(rèn)；

    3）不像圖片每次需要重新生成，添加刪除更方便。

以上是“css中如何引入外部字體”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞標(biāo)題：css中如何引入外部字體
鏈接地址：http://jinyejixie.com/article30/pdcopo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、做網(wǎng)站、網(wǎng)站建設(shè)、企業(yè)建站、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)