样式 CSS


字体 Font

提高文字辨识性和页面易读性,并在视觉上达到统一和整体。

标题 Header

标题字号范围建议13-22号,正文字号13号、14号;设备格式统一采用苹果系统设备字体(SF Pro Text);字号不做绝对限制。

日常使用推荐带绿点 16号、18号、20号、22号、24号、26号、28号、30号、32号,尽量避免加粗字体。

32px 标题字体
30px 标题字体
28px 标题字体
26px 标题字体
24px 标题字体
22px 标题字体
20px 标题字体
18px 标题字体
16px 标题字体
14px 标题字体
13px 标题字体
数字/英文 Alphabet/Number

数字/英文字体样式为微软雅黑,字号不做绝对限制。

日常使用推荐带绿点 12号、13号、14号、16号,使用时需要强调可以加粗字体。

20px 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ
18px 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ
16px 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ
14px 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ
13px 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ
12px 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ
系统设备字体 Font Families

为了适配不同操作系统和游览器,所需文字均采用系统自带字体,以供不同系统设备做最佳适配陪。

中文

  1. Windows 优先使用(HanHei SC),如果没有则使用(STHeitiSC-Light)。
  2. OS X优先使用(PingFang SC),如果没有则使用默认(HanHei SC)。

西文

  1. Windows 和 OS X都优先使用(arial)。
body { font-size: 14px;
                    font-family:"SF Pro Text",arial,verdana,helvetica,'PingFang SC','HanHei SC',STHeitiSC-Light,Microsoft Yahei,sans-serif;
                    background-color: #fff;
                    color: #333;
                    -webkit-font-smoothing: antialiased;
                }