CSS font-family字體(宋體 黑頭 微軟雅黑)CSS文字字體屬性教程
HTML網頁DIV+CSS布局中，都必須對網頁設置字體樣式font-family，如果不設置將會造成不同浏覽器因浏覽器品牌版本不同默認顯示不同文字字體，造成文字字體不統一的低級兼容問題（擴展了解CSS字體大小）。
一、CSS字體屬性單詞
對文字設置CSS字體樣式使用CSS屬性單詞：
font-family
二、font-family語法
font-family:值
如：
font-family:”黑體”;
font-family:”宋體”;
font-family:”微軟雅黑”;
font-family:”新宋體”;
以上是系統默認有的字體。
font-family語法小例子：
p{ font-family:"微軟雅黑";}
設置網頁中所以p標簽內文字font-family字體為微軟雅黑字體。
三、font-family中文字體選擇與轉換
網頁布局中英文字體選擇，根據默認大家電腦系統都有的可設置為網頁布局使用font-family字體值，其它太偏的用戶電腦沒有字體不要設置，避免你自己電腦裝的字體自己浏覽此網頁沒問題，其它用戶沒有裝這樣字體造成font-family字體失效。
1、font-family中文字體選擇
重點ThinkCSS介紹下font-family中文字體選擇與設置技巧。
由於不同電腦系統（WIN系統、蘋果系統等）默認安裝字體不多（大多系統默認相同字體更是少之又少，好在常見幾個中文字體電腦系統都默認安裝），造成我們在DIV CSS開發網頁時候，字體不能亂設置，假如你安裝很多字體，可能你CSS font-family設置字體在本機上能正確顯示，但是在其他沒有安裝此字體電腦上不能正確顯示該字體，而是現實其它系統默認字體，這樣造成低級字體兼容問題，所以我們在CSS布局時候能亂設置中文字體。
常見默認中文字體可font-family設置有哪些？
黑體、宋體、微軟雅黑、新宋體
常見就此4個字體其中新宋體用的也比較少。
所以推薦大家在DIV CSS布局也好在網頁美工設計也好要做HTML用文字表達的使用以上幾個字體來設計即可，避免字體兼容或美工設計與HTML後字體不同。
2、中文字體轉換
黑體——font-family:”黑體”
宋體——font-family:”宋體”
微軟雅黑——font-family:”微軟雅黑”
這樣使用這幾個字體沒問題，但是直接使用中文字作為font-family字體樣式，在大多品牌和版本浏覽器中能顯示正常，但是在微軟IE9浏覽器（IE9以上沒有測試過）中如果font-family是用中文字來設置這些字體會造成line-height失效，那解決方法？
將中文字體的中文字用英文名或轉換為Unicode。
1）、中文字用英文替代，比如：
黑體 英文 SimHei
font-family:”黑體” 與font-family:”SimHei”是一樣的 都是設置為黑體。
宋體 英文 SimHei
font-family:”宋體” 與font-family:”SimSun”是一樣的 都是設置為黑體。
微軟雅黑 英文 Microsoft YaHei
font-family:”微軟雅黑” 與font-family:”Microsoft YaHei”是一樣的 都是設置為黑體。
2）、中文字轉換Unicode，比如：
黑體 Unicode轉換 \9ED1\4F53
font-family:”黑體” 與font-family:”\9ED1\4F53”是一樣的 都是設置為黑體。
宋體 Unicode轉換 \5B8B\4F53
font-family:”宋體” 與font-family:”\5B8B\4F53”是一樣的 都是設置為黑體。
微軟雅黑 Unicode轉換 \5FAE\8F6F\96C5\9ED1
font-family:”微軟雅黑” 與font-family:”\5FAE\8F6F\96C5\9ED1”是一樣的 都是設置為黑體。
經驗：如果需要使用英文、或Unicode類型字體我們不需要記住這些字體英文拼寫，我們只需要進入thinkcss字體轉換專題頁查找對應中文字體Unicode轉換轉化即可。網址：http://www.thinkcss.com/jiqiao/325.shtml
四、font-family實例
ThinkCSS為大家實踐font-family宋體、黑體、微軟雅黑，掌握font-family用法。
這裡對div、p、span分別設置這三種font-family字體樣式。在使用這三個中文字體時會轉換為Unicode格式以便兼容各大浏覽器。
1、字體對應轉換
黑體 Unicode轉換 \9ED1\4F53
宋體 Unicode轉換 \5B8B\4F53
微軟雅黑 Unicode轉換 \5FAE\8F6F\96C5\9ED1
當然還可以使用英文，但這裡使用Unicode轉換後字體。
更多字體轉換速查：http://www.thinkcss.com/jiqiao/325.shtml
2、實例CSS+HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>font-family實例 ThinkCSS</title>
<style>
div{ font-family:"\9ED1\4F53"}/* 設置div內文字為黑體 */
p{ font-family:"\5B8B\4F53"}/* 設置p內文字為宋體 */
span{ font-family:"\5FAE\8F6F\96C5\9ED1"}/* 設置span內文字為微軟雅黑 */
</style>
</head>
<body>
<div>仔細觀察 我是黑體字</div>
<p>仔細觀察 我是宋體字</p>
<span>仔細觀察 我是微軟雅黑字</span>
</body>
</html>
便於觀察將CSS代碼使用style標簽放入html內。
3、實例截圖
font-family字體實例在浏覽器截圖
4、在線演示與下載
在線演示：
查看案例
打包下載：
立即下載（1.205KB）
五、font-family總結
font-family用於設置文字字體屬性單詞，使用時候注意中文字體轉換，以及哪些中文字體可用，切記勿亂用字體避免HTML字體兼容問題。