（轉載）不錯的CSS寫法

標籤：mac os   設計   應該   ros   境界   lin   影響   pre   大小   

　　根據訂閱號“設計達人”推送的文章，學到了如題知識。個人嘗試了一下，感覺還不錯。原文連結：http://mp.weixin.qq.com/s/g9TyBwB9xIi45TGwTBOLSQ。

　　字型

　　　

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

　　推薦字型：

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

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

　　字型顏色 Color

　　

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

　　推薦字型顏色：#333

　　字型 Font-Size

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

　　推薦字型szie：16px

　　字型行距 Line-Height

　　

　　字型行距對於閱讀也有有很大的影響，比如多行文本的時候，容易在閱讀時「串列」，所以字型的行距個人建議是字型的1.5 – 2.0倍之間。

　　推薦行距：1.75em（CSS預設就是 em 為單位，所以 em 可以省略不寫。）

　　最佳 CSS 寫法

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

　　個人實驗（）

　　

 

　　總結

　　　這些東西不會是一成不變的，根據需求、境界改變，找到適合的就好。

（轉載）不錯的CSS寫法