優化閱讀體驗，網站預設字體的CSS最佳寫法

Sponsor

英文字體的文件大小比較小可以使用嵌入字體讓網站展示更好，但中文就不一樣了，文件大小是 MB 級別，為了 WEB 端性能，只好使用系統自帶的默認字體，然而我們有 Windows 和 Mac? OS 兩個系統，這兩個系統的默認字體是不同的，那么 CSS 中的 font-family、字體大小、顏色、行距如何設置才是最美、最好看的呢？作為網頁設計師，對這方面也有所研究，下面是設計達人（公眾號ID：shejidaren888）分享下這個設置方法，歡迎一起交流。

注：這里我們只介紹「大多數」的用法，個別特殊設計需求的網站可能不適用此方法。

目錄：

1. 字體
2. 字體顏色 color
3. 字號 font-size
4. 字體行距 line-height
5. 最佳 CSS 寫法

字體

從用戶體驗角度來講，段落文本閱讀體驗最好的是黑體（無襯線體），而非宋體（襯線體），Win7的時候，字體默認的宋體，而從Windows 10開始，瀏覽器默認字體改成微軟雅黑了，而 Mac OS 默認也是黑體而非宋體。

推薦字體：

Windows：MicroSoft YaHei（微軟雅黑）
Mac OS：PingFang SC（蘋方）或 Hiragino Sans GB（冬青黑體）

body{
	fomt-family: Hiragino Sans GB, MicroSoft YaHei;
}

注：個人喜歡把蘋方作為文章標題字體（20PX以上），而冬青黑體作為段落字體。

字體顏色 color

大部網頁背景顏色是使用白色，所以字體應該是使用黑色較為友好，當不建議使用純黑（#000），這是因為純白底與純黑的對比太過于強烈，可以使用灰一點的黑色，比如#333，這樣能減輕用戶視覺負擔。

推薦字體顏色：#333

body{
	color:#333;
}

字體 font-size

由于現在的電腦屏都是寬屏，手機的屏幕更是高清屏，所以字體大小建議采用16PX字號會比較適合閱讀。

推薦字體szie：16px

body{
	font-size:16px;
}

字體行距 line-height

字體行距對于閱讀也有有很大的影響，比較選中太小，對于多行文字的時候，容易在閱讀時「串行」，所以字體的選中個人建議是字體的1.5 – 2.0倍之間。

推薦行距：1.75EM

body{
	line-height:1.75; 
}

這里后面我沒有加入 em，是因為CSS默認就是 em 為單位，所以 em 可以省略不寫

最佳 CSS 寫法

body {
  /*  字體  */
  font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;
  
  /*  字號 */
  font-size: 16px;
  
  /*  字體顏色  */
  color: #333;
  
  /* 行距 */
  line-height: 1.75;
}

這里說明一下-apple-system 和 BlinkMacSystemFont 就是讓 MAC OS 自動選擇系統字體的意思。

最后，網頁設計趨勢是不斷變化的，比如微軟和蘋果突然又冒出了一款超牛 X 網頁字體……，此時設計師們就要根據需求而變了。

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。