CSS如何實(shí)現(xiàn)讀取服務(wù)器字體

2024-07-11 08:40:43

字體：大中小

供稿：網(wǎng)友

【前端技術(shù)】CSS如何實(shí)現(xiàn)讀取服務(wù)器字體？

在CSS 3或者CSS 2手冊(cè)里，都可以找到@font-face這個(gè)屬性；

@font-face CSS語法：

@font-face{font-family:name;src:<url>;sRules;}

@font-face 取值：

<name>： 字體名稱 <url>： 使用絕對(duì)或相對(duì)地址指定OpenType字體 <sRules>： 樣式表定義

@font-face 屬性說明：

設(shè)置嵌入HTML文檔的字體。

通常使用.ttf(TrueType)和.otf(OpenType)兩種字體格式。

嵌入HTML文檔的字體是指將OpenType字體（壓縮的TrueType字體）文件映射到客戶端系統(tǒng)，用來提供HTML文檔使用該字體，或取代客戶端系統(tǒng)已有的同名字體。即讓客戶端顯示客戶端所沒有安裝的字體。

微軟的IE5已經(jīng)是開始支持這個(gè)屬性，但是只支持微軟自有的.eot(Embedded Open Type)格式，而其他瀏覽器直到現(xiàn)在都沒有支持這一字體格式。Safari從3.1開始已經(jīng)可以設(shè)置.ttf(TrueType)和.otf(OpenType)兩種字體做為自定義字體了。

據(jù)CSS 3手冊(cè)顯示@font-face屬性的兼容性：

手冊(cè)中的示例代碼：

<!DOCTYPE html> 
<html lang="zh-cn"> 
<head> 
<meta charset="utf-8" /> 
<title>@font-face_CSS參考手冊(cè)</title> 
<style> 
@font-face{ 
    font-family:YH; 
    src:url(http://domain/fonts/MSYH.TTF); 
} 
body{font-family:'YH';} 
</style> 
</head> 
<body> 
<div>如果你的機(jī)器沒有安裝微軟雅黑Microsoft YaHei，可以玩玩看。如果你用的是老版本IE，很遺憾你得找找看.eot格式的該字體</div> 
</body> 
</html>