css系列之關於字體的事

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';  /* 使用聲明的字體 */
        }

選擇字體須要注意的問題

一、字體的中英文寫法：

咱們在操做系統中經常看到宋體、微軟雅黑這樣的字體名稱，但實際上這只是字體的顯示名稱，而不是字體文件的名稱，通常字體文件都是用英文命名的，如SimSun、Microsoft Yahei。在大多數狀況下直接使用顯示名稱也能正確的顯示，可是有一些用戶的特殊設置會致使中文聲明無效。
所以，保守的作法是使用字體的字體名稱（英文）或者二者兼寫。以下示例：

font-family: STXihei, "Microsoft YaHei";
font-family: STXihei, "華文細黑", "Microsoft YaHei", "微軟雅黑";
二、聲明英文字體：

絕大部分中文字體裏都包含英文字母和數字，不進行英文字體聲明是沒有問題的，可是大多數中文字體中的英文和數字的部分都不是特別漂亮，因此建議也對英文字體進行聲明。
因爲英文字體中大多不包含中文，咱們能夠先進行英文字體的聲明，這樣不會影響到中文字體的選擇，所以優先使用最優秀的英文字體，中文字體聲明則緊隨其次。以下示例：

font-family: Arial, "Microsoft YaHei";
三、照顧不一樣的操做系統：

英文、數字部分：在默認的操做系統中，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";
四、注意向下兼容

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

font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", STXihei, "Microsoft YaHei", SimHei, "WenQuanYi Micro Hei";
加入了 STXihei（華文細黑）和 SimHei（黑體）。

五、補充字體族名稱

字體族大致上分爲兩類：sans-serif（無襯線體）和serif（襯線體），當全部的字體都找不到時，咱們可使用字體族名稱做爲操做系統最後選擇字體的方向。通常非襯線字體在顯示器中的顯示效果會比較好，所以咱們須要在最後添加 sans-serif，寫法以下：。

font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
六、lang及charset
影響默認字體。
lang 屬性規定元素內容的語言。

charset 屬性能夠經過任意元素上的 lang 屬性來重寫。

參考連接

真正瞭解CSS3背景下的@font face規則
Web 字體應用指南最佳實踐修煉之道（上）
給本身的Fonts教程