使用 CSS 自定義網頁字體

如何使用自定義字體呢？一般的解決辦法是把文字體成圖片，但是有點麻煩, 不適合我的樣的懶人，而且做成圖片也不方便修改。還有一種是通過CSS樣式定義，我選擇了這種, 因為它簡單易用，CSS中使用@font-face屬性來實現在網頁中嵌入任意字體，稍稍復雜一點的問題是每種瀏覽器都有自己的字體格式要求。

.TTF或.OTF 適用于Firefox 3.5、Safari、Opera
.EOT 適用于Internet Explorer 4.0+
.SVG 適用于Chrome、IPhone

方法：

stylesheet.css為樣式定義(也就是自定義字體部分),

@font-face {

font-family: 'fontName'; /* 字體名稱,可自己定義 */

src: url('fontName.eot');

src: local('fontName Regular'),

local('fontName'),

url('fontName.woff') format('woff'),

url('fontName.ttf') format('truetype'),

url('fontName.svg#fontName') format('svg');

}

將其內容復制到自己的樣式表中就可以了, (注意URL部分與自己域空間內字體文件路徑相匹配)

/* 使用方法 */

<p style="font-family: fontName">hello world!</p>

這樣基本就完成了.

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈