前端网页字体科普
字體分類
常見的字體可以分為兩類：襯線體、無襯線體。
1、serif（襯線體）：在字的筆畫開始、結束的地方有額外的裝飾，而且筆畫的粗細會有所不同。
常見的襯線體有：
?宋體、楷體
?Times New Roman
2、sans-serif（無襯線體）：筆劃粗細基本一致，只剩下主干，造型簡明有力，起源也很晚。適用于標題、廣告等，識別性高。
常見的無襯線體有：
?黑體
?Windows 平臺默認的中文字體：微軟雅黑（Microsoft Yahei）
?Windows 平臺默認的英文字體：Arial
?Mac & iOS 平臺默認的中文字體：蘋方（PingFang SC）
?Mac & iOS 平臺默認的英文字體：San Francisco
?Android 平臺默認字體：Droid Sans
補充：
襯線體如今已經很少使用了，你所熟悉的“宋體”，也基本只能在紙質出版物中見到。而非襯線體更符合現代審美。
所以，在這里溫馨提示各位：做PPT不要用宋體。如果你不知道用什么字體，那就用系統的默認字體就好：Win 平臺用微軟雅黑、Mac 平臺用蘋方字體。
?
字體族
CSS 中的字體族可以理解成是某一類字體。常見的字體族可以分為五類：
?serif：襯線體。
?sans-serif：無襯線體。
?monospace：等寬字體。每一個字母所占的寬度是相同的。寫代碼的字體盡量用等寬字體。
?cursive：手寫字體。比如徐靜蕾手寫體。
?fantasy：夢幻字體。比如一些藝術字。
這五類字體族不代表某一個具體的字體，而是當你在 CSS 中指定字體族的時候，系統就有可能在字體族中找出一種字體來顯示。
?
多字體fallback
多字體 fallback 機制，可以理解成是字體的一種兜底機制。它意思是：當指定的字體找不到時，就繼續往后找。比如：
.div{font-family: "PingFang SC", "Microsoft Yahei", sans-serif; }上面這行CSS代碼的意思是：讓文字在 iOS & Mac 操作系統上使用蘋果的“蘋方”字體，在 Windows 系統上用微軟雅黑字體，如果這兩個字體都沒有，就隨便找一個無襯線體進行顯示。
font-weight：字體的加粗屬性
font-weight 字體加粗屬性，是讓前端和產品同學最迷茫的屬性。當你把做好的頁面拿給產品經理體驗時，產品經理首先關注到的就是字體的加粗問題。
我們先來看看?font-weight?有哪些屬性值。
在設置字體是否加粗時，屬性值既可以直接填寫 100 至 900 這樣的數字，也可以填寫normal、bold這樣的單詞。normal的值相當于 400，bold的值相當于 700。如下：
關鍵問題是，很多人會發現，在 Android 平臺的瀏覽器中， font-weight 無論是設置300、400，還是500，文字的粗細都沒有任何變化，只有到700的時候才會加粗一下，感覺瀏覽器好像不支持這些數值，那搞這么多檔位有用嗎？
實際上，所有這些數值關鍵字瀏覽器都是支持的，之所以沒有看到任何粗細的變化，要看你所使用的字體是否支持。
就拿“微軟雅黑”這個字體來舉例，它只支持兩種粗細，所以當你在代碼里寫成500的時候，也會被認為是400。但是 Mac 上的“蘋方”字體，就支持至少六種粗細。
?
各大平臺的字體加粗效果
一張圖，勝過千言萬語。解釋了這么多，我們來看看各大操作系統的默認字體，加粗效果是什么樣的。
以下截圖，都是我親自測試的結果，如果你打算讓別人看字體加粗效果，直接把下面的圖丟給他即可。像我這樣貼心的前端，恐怕不多見了。
1、iOS 平臺的默認字體加粗效果：（蘋方字體）
2、Android 平臺（華為 P30 Pro）的默認字體加粗效果：（Droid Sans 字體）
3、Mac 平臺的默認字體加粗效果：（蘋方字體）
4、Windows 平臺的默認字體加粗效果：（微軟雅黑字體）
總結：（各大操作系統的默認字體加粗效果）
?Android 平臺的 Droid Sans 字體，只有?>=700才會加粗；而且加粗效果相同。
?Mac & iOS 平臺的“蘋方”字體：500 和600，加粗效果是不同的；>=600的加粗效果是相同的。
?Windows 平臺的“微軟雅黑”字體：只有?>=600?才會加粗，而且加粗效果相同。
?
?
?
?
出自jd-wecTeam
總結
- 上一篇： ROS 之 KUKA iiwa编程
- 下一篇： 2017年html5行业报告,云适配发布