字體分類

常見的字體可以分為兩類：襯線體、無襯線體。

1、serif（襯線體）：在字的筆畫開始、結(jié)束的地方有額外的裝飾，而且筆畫的粗細(xì)會(huì)有所不同。

常見的襯線體有：

?宋體、楷體

?Times New Roman

2、sans-serif（無襯線體）：筆劃粗細(xì)基本一致，只剩下主干，造型簡(jiǎn)明有力，起源也很晚。適用于標(biāo)題、廣告等，識(shí)別性高。

常見的無襯線體有：

?黑體

?Windows 平臺(tái)默認(rèn)的中文字體：微軟雅黑（Microsoft Yahei）

?Windows 平臺(tái)默認(rèn)的英文字體：Arial

?Mac & iOS 平臺(tái)默認(rèn)的中文字體：蘋方（PingFang SC）

?Mac & iOS 平臺(tái)默認(rèn)的英文字體：San Francisco

?Android 平臺(tái)默認(rèn)字體：Droid Sans

補(bǔ)充：

襯線體如今已經(jīng)很少使用了，你所熟悉的“宋體”，也基本只能在紙質(zhì)出版物中見到。而非襯線體更符合現(xiàn)代審美。

所以，在這里溫馨提示各位：做PPT不要用宋體。如果你不知道用什么字體，那就用系統(tǒng)的默認(rèn)字體就好：Win 平臺(tái)用微軟雅黑、Mac 平臺(tái)用蘋方字體。

?

字體族

CSS 中的字體族可以理解成是某一類字體。常見的字體族可以分為五類：

?serif：襯線體。

?sans-serif：無襯線體。

?monospace：等寬字體。每一個(gè)字母所占的寬度是相同的。寫代碼的字體盡量用等寬字體。

?cursive：手寫字體。比如徐靜蕾手寫體。

?fantasy：夢(mèng)幻字體。比如一些藝術(shù)字。

這五類字體族不代表某一個(gè)具體的字體，而是當(dāng)你在 CSS 中指定字體族的時(shí)候，系統(tǒng)就有可能在字體族中找出一種字體來顯示。

?

多字體fallback

多字體 fallback 機(jī)制，可以理解成是字體的一種兜底機(jī)制。它意思是：當(dāng)指定的字體找不到時(shí)，就繼續(xù)往后找。比如：

.div{font-family: "PingFang SC", "Microsoft Yahei", sans-serif; }

上面這行CSS代碼的意思是：讓文字在 iOS & Mac 操作系統(tǒng)上使用蘋果的“蘋方”字體，在 Windows 系統(tǒng)上用微軟雅黑字體，如果這兩個(gè)字體都沒有，就隨便找一個(gè)無襯線體進(jìn)行顯示。

font-weight：字體的加粗屬性

font-weight 字體加粗屬性，是讓前端和產(chǎn)品同學(xué)最迷茫的屬性。當(dāng)你把做好的頁(yè)面拿給產(chǎn)品經(jīng)理體驗(yàn)時(shí)，產(chǎn)品經(jīng)理首先關(guān)注到的就是字體的加粗問題。

我們先來看看?font-weight?有哪些屬性值。

在設(shè)置字體是否加粗時(shí)，屬性值既可以直接填寫 100 至 900 這樣的數(shù)字，也可以填寫normal、bold這樣的單詞。normal的值相當(dāng)于 400，bold的值相當(dāng)于 700。如下：

關(guān)鍵問題是，很多人會(huì)發(fā)現(xiàn)，在 Android 平臺(tái)的瀏覽器中， font-weight 無論是設(shè)置300、400，還是500，文字的粗細(xì)都沒有任何變化，只有到700的時(shí)候才會(huì)加粗一下，感覺瀏覽器好像不支持這些數(shù)值，那搞這么多檔位有用嗎？

實(shí)際上，所有這些數(shù)值關(guān)鍵字瀏覽器都是支持的，之所以沒有看到任何粗細(xì)的變化，要看你所使用的字體是否支持。

就拿“微軟雅黑”這個(gè)字體來舉例，它只支持兩種粗細(xì)，所以當(dāng)你在代碼里寫成500的時(shí)候，也會(huì)被認(rèn)為是400。但是 Mac 上的“蘋方”字體，就支持至少六種粗細(xì)。

?

各大平臺(tái)的字體加粗效果

一張圖，勝過千言萬(wàn)語(yǔ)。解釋了這么多，我們來看看各大操作系統(tǒng)的默認(rèn)字體，加粗效果是什么樣的。

以下截圖，都是我親自測(cè)試的結(jié)果，如果你打算讓別人看字體加粗效果，直接把下面的圖丟給他即可。像我這樣貼心的前端，恐怕不多見了。

1、iOS 平臺(tái)的默認(rèn)字體加粗效果：（蘋方字體）

2、Android 平臺(tái)（華為 P30 Pro）的默認(rèn)字體加粗效果：（Droid Sans 字體）

3、Mac 平臺(tái)的默認(rèn)字體加粗效果：（蘋方字體）

4、Windows 平臺(tái)的默認(rèn)字體加粗效果：（微軟雅黑字體）

總結(jié)：（各大操作系統(tǒng)的默認(rèn)字體加粗效果）

?Android 平臺(tái)的 Droid Sans 字體，只有?>=700才會(huì)加粗；而且加粗效果相同。

?Mac & iOS 平臺(tái)的“蘋方”字體：500 和600，加粗效果是不同的；>=600的加粗效果是相同的。

?Windows 平臺(tái)的“微軟雅黑”字體：只有?>=600?才會(huì)加粗，而且加粗效果相同。

?

?

?

?

出自jd-wecTeam

總結(jié)

以上是生活随笔為你收集整理的前端网页字体科普的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。