css引入外部字體的方法

這篇文章主要介紹了css引入外部字體的方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

一、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è)置字體名稱(chēng)";

例：

css代碼：

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

html代碼：

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

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

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

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

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

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

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

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

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

@font-face {
    /* font-properties */
    font-family: 用戶(hù)自定義的字體名稱(chēng);
    src:url('加載外部字體文件的文件地址'),  
    url('加載外部字體文件的文件地址'),
    url('加載外部字體文件的文件地址'); /* IE9 */
}

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

2）使用剛剛定義的字體

div {
    font-family: 用戶(hù)自定義的字體名稱(chēng);
}

代碼實(shí)例：

@font-face {
	 font-family: 'YaHei Consolas Hybrid';
	src: url('../fonts/yaheiconsolashybrid.ttf');
}

body {
	font-family: 'YaHei Consolas Hybrid';
	font-size: 16px;
}

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

/*字體后綴和瀏覽器有關(guān)，如下所示
* .TTF或.OTF，適用于Firefox 3.5、Safari、Opera 
* .EOT，適用于Internet Explorer 4.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)集，稱(chēng)為網(wǎng)絡(luò)字體。這些網(wǎng)絡(luò)字體較平常的安全字體有以下的優(yōu)點(diǎn)：

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

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享css引入外部字體的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!