css怎麼引入外部字體？ css 字體樣式設定的方法（實例）

在瀏覽器顯示中，頁面上不同的字體樣式，不僅提升了頁面的美觀度，也提升了使用者的瀏覽互動性。那麼這些不同的字體樣式是怎麼用css設定的呢？本章就帶給大家css如何引入外部字體？ css 字體樣式設定的方法（實例）。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

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

1.font-family屬性的功能

#font-family屬性就是可以用css程式碼設定頁面上文字顯示的字體樣式，例如：宋體，微軟雅黑等等。 font-family屬性設定不同的字體，可以讓頁面顯示效果更協調美觀。

font-family 屬性可以定義多個值（字體），並用逗號隔開。如果瀏覽器不支援第一個字體，則會嘗試下一個，直到有一個可識別的。瀏覽器會使用它可識別的第一個值。

2.font-family屬性的用法

font-family:"设置字体名称";

例：

css程式碼：

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

html程式碼：

<div class="demo">我是一段测试文字</div>

這樣在demo盒子裡的所有文字都會以微軟雅黑的字體樣式顯示。

二、CSS怎麼引進外部字體？

一般瀏覽器常用的字體包括：宋體、黑體、微軟雅黑等幾種。因為網頁載入選擇字體時候是呼叫訪客係統文字庫的文字字體，如果沒有找到字體那將顯示預設的網頁字體。而每個人安裝的作業系統預設有這幾種字體，所以這些字體又稱為安全字體。但為了一些特別的需要，顯示有個人化的、好看的文字樣式，我們可以引用一些外在字體。

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

1.@font-face 標籤介紹

@font-face 讓您在網頁中使用電腦中沒有安裝的字體，完全擺脫安全字體的限制。只需將字體包安裝在伺服器上，當使用者載入網頁時，字體包會自動下載到使用者機器上，確保字體能夠正確渲染。

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

1）在CSS中引入字體並給外部字體自訂名稱

@font-face {
    /* font-properties */
    font-family: 用户自定义的字体名称;
    src:url('加载外部字体文件的文件地址'),  
    url('加载外部字体文件的文件地址'),
    url('加载外部字体文件的文件地址'); /* IE9 */
}

font- family定義字體的名字，接下來的src是載入字體檔案的位置，之所有有多個url就是因為瀏覽器相容問題。

2）使用剛剛定義的字體

div {
    font-family: 用户自定义的字体名称;
}

程式碼實例：

#

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

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

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

/*字体后缀和浏览器有关，如下所示
* .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 的不斷流行，產生了許多新的字體格式圖示集，稱為網頁字體。這些網頁字體較平常的安全字體有以下的優點：

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

2）可以被搜尋引擎辨認；

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

以上是css怎麼引入外部字體？ css 字體樣式設定的方法（實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！