常見的字型可以分為兩類：襯線體、無襯線體。
1、serif（襯線體）：在字的筆畫開始、結束的地方有額外的裝飾，而且筆畫的粗細會有所不同。
常見的襯線體有：
•宋體、楷體
•times new roman
2、sans-serif（無襯線體）：筆劃粗細基本一致，只剩下主幹，造型簡明有力，起源也很晚。適用於標題、廣告等，識別性高。
常見的無襯線體有：
•黑體•windows 平台預設的中文字型：微軟雅黑（microsoft yahei）
•windows 平台預設的英文本型：arial
•mac & ios 平台預設的中文字型：蘋方（pingfang sc）
•mac & ios 平台預設的英文本型：san francisco
•android 平台預設字型：droid sans
補充：
襯線體如今已經很少使用了，你所熟悉的「宋體」，也基本只能在紙質出版物中見到。而非襯線體更符合現代審美。
css 中的字型族可以理解成是某一類字型。常見的字型族可以分為五類：
•serif：襯線體。
•sans-serif：無襯線體。
•monospace：等寬字型。每乙個字母所佔的寬度是相同的。寫**的字型盡量用等寬字型。
•cursive：手寫字型。比如徐靜蕾手寫體。
•fantasy：夢幻字型。比如一些藝術字。
這五類字型族不代表某乙個具體的字型，而是當你在 css 中指定字型族的時候，系統就有可能在字型族中找出一種字型來顯示。
多字型 fallback 機制，可以理解成是字型的一種兜底機制。它意思是：當指定的字型找不到時，就繼續往後找。比如：
.divfont-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
IC前端 後端 科普
前端 就是將你的想法或別人的想法用你設計的電路來實現，也就是說你可以通過電路設計來實現你的想法。可以這樣說，那時你就是乙個科學家。有人這樣認為 乙個好的前端ic設計師不應該叫設計師而應該叫科學家。後端 就是將你設計的電路製造出來，要在工藝上實現你的想法。除了rtl程式設計和 這兩個基本要求外，前端設...
關於前端字型
請看這篇文章 下面的寫法相容各種情況，完美展現 font family helvetica,tahoma,arial,stxihei,華文細黑 microsoft yahei 微軟雅黑 simsun,宋體 heiti,黑體 sans serif 由於 hiragino sans gb 冬青黑體 是m...
網頁設計的字型
字型的處理在網頁設計中無論怎麼強調也不為過，畢竟網頁使用來傳遞資訊的，而最經典最直接的資訊傳遞方式就是文字，所以，了解一點字型的基本知識對於設計來說還是非常重要的。中文和英文的最大區別就是中文是方塊字，英文是拼音文字，這對字型的處理的影響是巨大的。看看下面的圖示就會發現，英文本型裡的那些變化在中文字...