記得以前某某某天上午被設(shè)計師“調(diào)戲”了楷扬，記憶猶新啊，就是因為一個項目（PC和移動）中的字體問題贴见，糾結(jié)了一上午毅否，設(shè)計師非要字體效果跟設(shè)計稿上保持一致。那時那刻蝇刀，我已無語，但是話說回來徘溢，大家都是為了項目的質(zhì)量吞琐，所以得放平心態(tài)，反思然爆，于是“誕生了”今天下午要分享的話題：CSS中的字體設(shè)置站粟。
談到“CSS中的字體”，老生常談的話題了曾雕，做過設(shè)計和前端的童鞋都會略知一些其中的“奧妙”奴烙。在平時工作中，完成一個項目剖张，從設(shè)計稿到頁面最終的輸出效果切诀，就字體方面來說，細心的童鞋會發(fā)現(xiàn)有很多方面細活要去做的搔弄，當(dāng)然了幅虑，這是建立在項目本身要求非常高的情況下。今天下午從兩方面來討論：設(shè)置(font-family)和粗細(font-weight)顾犹。
字體設(shè)置(font-family)
在寫全局樣式時倒庵，我們都會去設(shè)置一個默認(rèn)的字體褒墨，舉個例子：
font-family:'PingFang SC','Microsoft YaHei','SimSun','Arial', sans-serif
上面的設(shè)置，頁面上首選字體是平方字體擎宝，如電腦上沒平方字體郁妈，就是顯示微軟雅黑，依次類推...
在設(shè)置一些中文字體的時候绍申，有些童鞋（以前的我）喜歡直接用中文噩咪，其實不太好喲，還是回歸到統(tǒng)一的英文失晴，在這里分享一些常用中文轉(zhuǎn)英文的字體：
華文細黑：STHeiti Light [STXihei]
華文黑體：STHeiti
華文楷體：STKaiti
華文宋體：STSong
華文仿宋：STFangsong
儷黑 Pro：LiHei Pro Medium
儷宋 Pro：LiSong Pro Light
標(biāo)楷體：BiauKai
蘋果儷中黑：Apple LiGothic Medium
蘋果儷細宋：Apple LiSung Light
Windows的一些：
新細明體：PMingLiU
細明體：MingLiU
標(biāo)楷體：DFKai-SB
黑體：SimHei
宋體：SimSun
新宋體：NSimSun
仿宋：FangSong
楷體：KaiTi
仿宋_GB2312：FangSong_GB2312
楷體_GB2312：KaiTi_GB2312
微軟正黑體：Microsoft JhengHei
微軟雅黑體：Microsoft YaHei
裝Office會生出來的一些：
隸書：LiSu
幼圓：YouYuan
華文細黑：STXihei
華文楷體：STKaiti
華文宋體：STSong
華文中宋：STZhongsong
華文仿宋：STFangsong
方正舒體：FZShuTi
方正姚體：FZYaoti
華文彩云：STCaiyun
華文琥珀：STHupo
華文隸書：STLiti
華文行楷：STXingkai
華文新魏：STXinwei
大家可以收藏起來剧腻，便于查閱。
據(jù)我了解涂屁，不管是PC還是移動端书在，現(xiàn)在的設(shè)計師默認(rèn)字體，中文的一般都習(xí)慣于“微軟雅黑”拆又、“微軟正黑體”儒旬，“平方字體”；英文的選擇比較多帖族，常用的有arial等栈源。由于PC設(shè)備不足，目前只有WINDOWS竖般，效果跟設(shè)計稿出入不大甚垦。但是在移動端有時候就會糾結(jié)了，其原因就是我們不了解移動端不同設(shè)備自帶的默認(rèn)字體涣雕。當(dāng)你跟設(shè)計師糾結(jié)此事時艰亮，作為前端攻城師，需要拿些證據(jù)去跟他們?nèi)ダ碚撜豕Ｈ缦拢?/p>
ios 系統(tǒng)
默認(rèn)中文字體是Heiti SC
默認(rèn)英文字體是Helvetica
默認(rèn)數(shù)字字體是HelveticaNeue
無微軟雅黑字體
android 系統(tǒng)
默認(rèn)中文字體是Droidsansfallback
默認(rèn)英文和數(shù)字字體是Droid Sans
無微軟雅黑字體
winphone 系統(tǒng)
默認(rèn)中文字體是Dengxian(方正等線體)
默認(rèn)英文和數(shù)字字體是Segoe
無微軟雅黑字體
可以發(fā)現(xiàn)無論是ios迄埃、android還是wp系統(tǒng)中都是沒有微軟雅黑字體的，隨后做了一個小測試兑障，就是將微軟雅黑字體的效果和各個系統(tǒng)默認(rèn)字體的效果做了一下對比侄非，發(fā)現(xiàn)無論頁面中使用哪種字體，肉眼很難看出它們的差異流译，對產(chǎn)品的體驗幾乎沒有影響逞怨。
結(jié)論：
各個手機系統(tǒng)有自己的默認(rèn)字體，且都不支持微軟雅黑先蒋。
如無特殊需求骇钦，手機端無需定義中文字體，使用系統(tǒng)默認(rèn)竞漾。
英文字體和數(shù)字字體可使用 Helvetica 眯搭，三種系統(tǒng)都支持窥翩。
OK，證據(jù)確鑿鳞仙。如果設(shè)計師需要用到一些特殊的英文字體寇蚊，比如漂亮的din1451a，akzidenzgrotesk-cond等棍好，我們需要轉(zhuǎn)換下仗岸，然后用@font-face引用下即可，這個方法不多說借笙，so easy
關(guān)于字體設(shè)置(font-family)的問題扒怖，就聊這么多吧。下一個問題：CSS字體粗細(font-weight)业稼。
CSS字體粗細(font-weight)
首先我們了解下font-weight的基本屬性值盗痒，如下表格：
| 值 | 描述 |
|---|---|
| normal | 默認(rèn)值。定義標(biāo)準(zhǔn)的字符低散。 |
| bold | 定義粗體字符俯邓。 |
| bolder | 定義更粗的字符。 |
| lighter | 定義更細的字符熔号。 |
| 100-900 | 定義由粗到細的字符稽鞭。400 等同于 normal，而 700 等同于 bold引镊。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承字體的粗細朦蕴。 |
切記：
400等同于normal，而700等同于bold弟头。
inherit規(guī)定應(yīng)該從父元素繼承字體的粗細梦重。
不過感覺效果不明顯。只能換個字體試試亮瓷。不過比較常見的中文字體里，感覺黑體比較粗些吧降瞳。我們看個簡單的例子嘱支，WINDOWS系統(tǒng)PC端效果：
對應(yīng)的CSS字體設(shè)置：
.p1{font:30px Pingfang SC}
.p2{font:300 30px Pingfang SC}
.p3{font:bold 30px Pingfang SC}
.p4{font:900 30px Pingfang SC}
完整的DEMO：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.p1{font:30px Pingfang SC}
.p2{font:300 30px Pingfang SC}
.p3{font:bold 30px Pingfang SC}
.p4{font:900 30px Pingfang SC}
</style>
</head>
<body>
<p class="p1">我愛你</p>
<p class="p2">我愛你</p>
<p class="p3">我愛你/p>
<p class="p4">我愛你</p>
</body>
</html>
可以根據(jù)值的設(shè)置，可以輕松搞定字體的粗細挣饥。細心的童鞋發(fā)現(xiàn)除师，如果設(shè)置font-weight:901會怎樣，設(shè)置font-weight:99又會是啥效果扔枫，哈哈_汛聚，我不說，您可以去嘗試短荐。公司窮倚舀，不給配置高大上的設(shè)備叹哭，至于其他系統(tǒng)下的PC加粗效果，大家可以去測試下痕貌，我要說的重點是在移動端风罩。
如果你對安卓和IOS前期的版本有了解的話，發(fā)現(xiàn)它們對于字體加粗屬性很亂舵稠，支持性不太好超升，無論你怎么設(shè)置都無效，說白了就是系統(tǒng)BUG哺徊，這里就不討論那些老掉牙的問題了室琢，我們是要先前看，_落追。
經(jīng)驗總結(jié)
CSS字體設(shè)置(font-family)和粗細(font-weight)在不同設(shè)備和系統(tǒng)下的差別盈滴，會給前端工程師在開發(fā)項目時帶來一些不便，尤其是在移動端淋硝，比如我想用一個特殊字符：五角星雹熬，箭頭，圓點谣膳，箭頭等等竿报，用字體直接去設(shè)置效果，最終出來的效果出來不盡人意继谚，這個大家可以去測試下便知烈菌，代替方法就是用CSS3、圖和base64等花履。
OK芽世，大概就這么多，希望能幫助到大家吧诡壁。
