Web Font

字體類型與格式

按照字體的描述方式來分：

點陣字體

矢量字體(輪廓字體)

按照字體的表現形式來分：

襯線字體(serif)：比如，宋體，Georgia，Times New Roman

非襯線字體(sans-serif):比如 Tahoma, Arial , 幼圓

其它字體：等寬字體(monospace),書寫體(cursive),夢幻體(fantasy)

@font-face

語法

@font-face的取值有以下幾個：

font-family：設置文本的字體名稱。之后可以在定義字體的字體棧中使用這個名稱。

font-style：設置文本樣式

font-variant：設置文本是否大小寫

font-weight：設置文本的粗細

font-stretch：設置文本是否橫向拉伸變形

font-size：設置文本字體大小

src：設置自定義字體的相對路徑或者絕對路徑。

注意：此屬性只能在@font-face規則里使用。

@font-face {

font-family: "Bitstream Vera Serif Bold";

src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");

}

瀏覽器支持度

不同的瀏覽器會要求不同的字體文件類型:

TrueType(TTF)和OpenType(OTF)字體文件在絕大多數的瀏覽器上都能正常工作。

IE4—IE8要求使用特殊的字體文件格式：嵌入式OpenType(EOT)

唯一能夠在Safari上正常工作的字體文件格式就是SVG，SVG在chrome、Opera上也能正常工作，但在Firefox上不行。

WOFF的含義是Web開放字體格式。越來越多的瀏覽器都在添加對它的支持。

這些字體格式中的一些能夠互相轉換。

一般在font-face中都引入各個類型的字體文件以適配所有瀏覽器。

/* 聲明字體(圖標字體) */

@font-face {

font-family: 'webfont';

src: url('font/webfont.eot'); /* IE9 */

src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('font/webfont.woff') format('woff'), /* chrome、firefox */

url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari、Android、IOS */

url('font/webfont.svg#webfont') format('svg'); /* ios 4.1 */

}

.myfont {

font-family: 'webfont'; /* 使用聲明的字體 */

}

選擇字體需要注意的問題

1、字體的中英文寫法：

我們在操作系統中常常看到宋體、微軟雅黑這樣的字體名稱，但實際上這只是字體的顯示名稱，而不是字體文件的名稱，一般字體文件都是用英文命名的，如SimSun、Microsoft Yahei。在大多數情況下直接使用顯示名稱也能正確的顯示，但是有一些用戶的特殊設置會導致中文聲明無效。

因此，保守的做法是使用字體的字體名稱(英文)或者兩者兼寫。如下示例：

font-family: STXihei, "Microsoft YaHei";

font-family: STXihei, "華文細黑", "Microsoft YaHei", "微軟雅黑";

2、聲明英文字體：

絕大部分中文字體里都包含英文字母和數字，不進行英文字體聲明是沒有問題的，但是大多數中文字體中的英文和數字的部分都不是特別漂亮，所以建議也對英文字體進行聲明。

由于英文字體中大多不包含中文，我們可以先進行英文字體的聲明，這樣不會影響到中文字體的選擇，因此優先使用最優秀的英文字體，中文字體聲明則緊隨其次。如下示例：

font-family: Arial, "Microsoft YaHei";

3、照顧不同的操作系統：

英文、數字部分：在默認的操作系統中，Mac和Win都會帶有Arial, Verdana, Tahoma等幾個預裝字體，從顯示效果來看，Tahoma要比Arial更加清晰一些，因此字體設置Tahoma最好放到前面，當找不到Tahoma時再使用Arial；而在Mac中，還擁有一款更加漂亮的Helvetica字體，所以為了照顧Mac用戶有更好的體驗，應該更優先設置Helvetica字體；Android系統下默認的無襯線字體就可以接受，因此無需單獨設置。最后，英文、數字字體的最佳寫法如下：

font-family: Helvetica, Tahoma, Arial;

中文部分：在Win下，微軟雅黑為大部分人最常使用的中文字體，由于很多人安裝Office的緣故，Mac電腦中也會出現微軟雅黑字體，因此把顯示效果不錯的微軟雅黑加入到字體列表是個不錯的選擇；同樣，為了保證Mac中更為優雅字體蘋方(PingFang SC)、黑體-簡(Heiti SC)、冬青黑體( Hiragino Sans GB )的優先顯示，需要把這些字體放到中文字體列表的最前面；同時為了照顧到Linux操作系統的體驗，還需要添加文泉驛微米黑字體。最后，中文字體部分最佳寫法如下：

font-family: "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";

中英文整合寫法：

font-family: Helvetica, Tahoma, Arial, "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";

font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";

4、注意向下兼容

如果還需要考慮舊版本操作系統用戶的話，不得不加上一些舊版操作系統存在的字體：Mac中的華文黑體、冬青黑體，Win中的黑體等。同樣按照顯示效果排列在列表后面，寫法如下：

font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", STXihei, "Microsoft YaHei", SimHei, "WenQuanYi Micro Hei";

加入了 STXihei(華文細黑)和 SimHei(黑體)。

5、補充字體族名稱

字體族大體上分為兩類：sans-serif(無襯線體)和serif(襯線體)，當所有的字體都找不到時，我們可以使用字體族名稱作為操作系統最后選擇字體的方向。一般非襯線字體在顯示器中的顯示效果會比較好，因此我們需要在最后添加 sans-serif，寫法如下：。

font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

6、lang及charset

影響默認字體。

lang 屬性規定元素內容的語言。

charset 屬性可以通過任意元素上的 lang 屬性來重寫。

參考鏈接

總結

以上是生活随笔為你收集整理的css字体向下来电,css系列之关于字体的事的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。