Web字體的初探

Web字體的初探

一，字體基本概念的介紹

1.1 字體的分類

1.1.1 Serif（襯線體）

Serif（襯線）：在印刷的文字中襯線字體對於人眼的辨識更輕鬆，閱讀更舒服橫細豎粗，開始和結束的地方有裝飾。在web上的字體，襯線字體比無襯線字體的辨識度更低，由於屏幕像素有限，不能很好地渲染出襯線體的效果。

1.1.2 Sans-Serif（無襯線體)

Sans-Serif(無襯線體）：在印刷的文字中，無襯線體比較醒目，在小字體場合比襯線體更加清晰，可是辨識度沒有襯線體高。在web字體中，無襯線字體比襯線字體更易讀。

1.1.3 Monospace（等寬字體）

Monospace（等寬字體）：每一個寬度都一致的字體，看起來比較整齊，比較適合用於顯示代碼。比較著名的有Courier New字體。

1.1.4 Cursive（草書）

Cursive（草書）：至關於印刷中的手寫體，看起來比較流暢，像手寫同樣。

1.2 經常使用的字體

Serif，Sans-Serif，Monospace屬於標準字體，Cursive,Fantasy屬於非標準字體

1.2.1 襯線體（Serif）

經常使用的中文襯線體：宋體（Simsun），仿宋（FangSong），楷體（KaiTi），華文仿宋（STFangSong），華文楷體（STKaiTi）。
常見的英文襯線體：Times new Roman，Times

1.2.2 無襯線體（Sans-Serif）

常見的中文無襯線體：微軟雅黑（Microsoft YaHei），黑體（SimHei），華文細黑（STXiHei）
常見的英文無襯線體：Tahoma，Arial，Helvetica，Verdana

1.2.3 等寬字體（monospace）

常見的等寬字體：Courier New，Courier

1.2.4 草書（Cursive）

常見的草書：Comic Sans MS

1.2.5 Fantasy

常見的Fantasy：Impact

二，網站中使用的字體

2.1 英文網站中使用的默認字體

font：12px/1.5 Tahoma,Helvetica,Arial,sans-serif
Tahoma：英文windows操做系統默認的字體
Helvetica：Mac OS X系統的系統默認字體
Arial：早期windows英文系統的默認字體。XP和Vista都是Tahoma
Sans-serif是針對linux的，linux默認只有kernel，字體由用戶自定義。
不管是XP仍是Vista下，不指定網頁的中文字體時，默認的就是宋體。所以在font-family中使用」宋體「是多餘的，能夠省去。

2.2 Windows操做系統提供的中文字體

黑體：SimHei
宋體：SimSun
新宋體：NSimSun
仿宋：FangSong
楷體：KaiTi
仿宋GB2312：FangSongGB2312
楷體GB2312：KaiTiGB2312
微軟雅黑：Microsoft YaHei(Windows 7開始提供）

2.3 OS X操做系統提供的中文字體

冬青黑體：Hiragino Sans GB（Snow Leopard開始提供）
華文細黑：STHeiti Light（又名STXiHei）
華文黑體：STHeiTi
華文楷體：STKaiTi
華文宋體：STSong
華文仿宋：STFangsong

2.4 更多有趣的字體使用

上面介紹的字體屬於常見的字體，也就是咱們所說的Web safe font。其在大部分網站是能夠正常顯示的。下面介紹的是比較有趣特殊的字體的使用方式。

2.5 使用web font的方法

2.5.1 使用link標籤

經過link導入樣式，而後直接經過font-family使用，如：

<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> font-family:"lobster"

參考Google Fonts

2.5.2 使用@import導入

經過@import導入字體的樣式，如：

@import url(https://fonts.googleapis.com/css?family=Candal); font-family:"Candal"

參考Google Fonts

2.5.3 使用javascript

經過javascript獲取字體樣式，如：

<script type="text/javascript"> WebFontConfig = { google: { families: [ 'Shadows+Into+Light::latin' ] } }; (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script> font-family:"Shadows Into Light"

參考Google Fonts

2.5.4 使用font-face

首先須要從網站下載對應的字體，而後url填入文件路徑，如：

@font-face{ font-family:"saucer"; src:url("fonts/SaucerBB.ttf") format("truetype"); } font-family:saucer;

2.5.5 使用這些特殊字體的弊端

使用這些特殊字體能夠產生很炫酷的文字，可是也存在很大的弊端：
1，不一樣的環境顯示的內容可能不同
2，顯示的內容不可靠
3，須要把字體包含到網站（有時可能有100kb大）中須要消耗大量的下載時間

三，大型網站上的字體實踐

1.淘寶：font-family: tahoma, arial, 'Hiragino Sans GB', 宋體, sans-serif;
2.百度：font-family: arial, 宋體, 'Hiragino Sans GB', 'Microsoft Yahei', 微軟雅黑, 宋體, Tahoma, Arial, Helvetica, STHeiti;
3.京東：font-family: Arial, Verdana, 宋體；
4.Youtube：font-family: Roboto, arial, sans-serif;
5.github：font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';

參考的網站：

creating good websites

serif和sans-serif的區別

中文字體網頁開發指南