网页字体设置你了解吗？

电玩女神 2022-08-06 15:09 144阅读 0赞

# 移动和PC端网页字体设置的入门知识    #

本文作者：破男孩　转载请注明来自：[**携程UED**][UED]

以前做项目的时候就依葫芦画瓢的设置 \{ font-family:arial,”microsoft yahei”,simsun,sans-self; \} 等类似的字体，然而当更多的设备和系统出现后，以前这样的设置已不能满足网页在各设备上的显示需求。

就拿最简单的宋体(simsun)来说吧，在Windows系统下显示是一个比较容易阅读的字体，然而在Mac上简直无法直视，如下图给出一个优化前后页面的对比效果：

[![字体优化前后对比图][E5_AF_B9_E6_AF_94_E5_9B_BE.jpg]][E5_AF_B9_E6_AF_94_E5_9B_BE.jpg]

因此，出于种种原因，促使我不得不去对字体做一个相应的了解。

对于网站字体设置，本文给出以下意见：

**移动端项目：**

font-family:Tahoma,Arial,Roboto,” Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;

**pc端(含Mac)项目：**

font-family:Tahoma,Arial,” Helvetica Neue“,”Hiragino Sans GB”,Simsun ,sans-self;

**移动和pc端项目：**

font-family:Tahoma,Arial,Roboto,” Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,”Hiragino Sans GB”,Simsun,sans-self;

首先说说字体的种类，字体分为五大种类，然而各设备的支持情况也个不相同，如，

各移动设备系统支持情况：

<table style="color:#444444"> 
 <tbody> 
  <tr> 
   <td>五大类字体</td> 
   <td align="center">安卓4.0</td> 
   <td align="center">IOS6.0</td> 
   <td align="center">WP8</td> 
  </tr> 
  <tr> 
   <td>sans-serif（无衬线）</td> 
   <td align="center"><span style="color:#008000">支持</span></td> 
   <td align="center"><span style="color:#008000">支持</span></td> 
   <td align="center"><span style="color:#008000">支持</span></td> 
  </tr> 
  <tr> 
   <td>serif（衬线）</td> 
   <td align="center"><span style="color:#008000">支持</span></td> 
   <td align="center"><span style="color:#008000">支持</span></td> 
   <td align="center"><span style="color:#008000">支持</span></td> 
  </tr> 
  <tr> 
   <td>monospace（等宽）</td> 
   <td align="center"><span style="color:#008000">支持</span></td> 
   <td align="center"><span style="color:#008000">支持</span></td> 
   <td align="center"><span style="color:#008000">支持</span></td> 
  </tr> 
  <tr> 
   <td>fantasy（梦幻）</td> 
   <td align="center">不支持</td> 
   <td align="center"><span style="color:#008000">支持</span></td> 
   <td align="center">不支持</td> 
  </tr> 
  <tr> 
   <td>cuisive（草体）</td> 
   <td style="text-align:center">不支持</td> 
   <td style="text-align:center">不支持</td> 
   <td style="text-align:center">不支持</td> 
  </tr> 
 </tbody> 
</table>

当然目前这只是移动设备各系统的支持情况，然而pc端个浏览器的支持情况也各不相同，如：

<table style="color:#444444"> 
 <tbody> 
  <tr> 
   <td>五大类字体</td> 
   <td align="center">IE系列</td> 
   <td align="center">Chrome</td> 
   <td align="center">Firefox</td> 
  </tr> 
  <tr> 
   <td>sans-serif（无衬线）</td> 
   <td align="center"><span style="color:#008000">支持</span></td> 
   <td align="center">不支持</td> 
   <td align="center">不支持</td> 
  </tr> 
  <tr> 
   <td>serif（衬线）</td> 
   <td align="center"><span style="color:#008000">支持</span></td> 
   <td align="center"><span style="color:#008000">支持</span></td> 
   <td align="center"><span style="color:#008000">支持</span></td> 
  </tr> 
  <tr> 
   <td>monospace（等宽）</td> 
   <td align="center"><span style="color:#008000">支持</span></td> 
   <td align="center"><span style="color:#008000">支持</span></td> 
   <td align="center"><span style="color:#008000">支持</span></td> 
  </tr> 
  <tr> 
   <td>fantasy（梦幻）</td> 
   <td align="center"><span style="color:#008000">支持</span></td> 
   <td align="center"><span style="color:#008000">支持</span></td> 
   <td align="center"><span style="color:#008000">支持</span></td> 
  </tr> 
  <tr> 
   <td>cuisive（草体）</td> 
   <td align="center">不支持</td> 
   <td align="center">不支持</td> 
   <td align="center">不支持</td> 
  </tr> 
 </tbody> 
</table>

下面介绍下个系统的默认字体和常用字体：

<table style="color:#444444"> 
 <tbody> 
  <tr> 
   <td>系统</td> 
   <td align="center">默认西文字体</td> 
   <td align="center">默认中文字体</td> 
   <td align="center">其他常用西文字体</td> 
   <td align="center">其他常用中文字体</td> 
  </tr> 
  <tr> 
   <td>Windows</td> 
   <td align="center">宋体</td> 
   <td align="center">宋体</td> 
   <td align="center">Tahoma、Arial、Verdana、Georgia</td> 
   <td align="center">微软雅黑、黑体</td> 
  </tr> 
  <tr> 
   <td>Android 4.0以下</td> 
   <td align="center">Droid Sans</td> 
   <td align="center">Droid Sans Fallback</td> 
   <td align="center">Arial</td> 
   <td align="center"><span style="color:#ff6600">无宋体、无微软雅黑</span></td> 
  </tr> 
  <tr> 
   <td>Android 4.0及以上</td> 
   <td align="center">Roboto</td> 
   <td align="center"><span style="color:#000000">Roboto</span></td> 
   <td align="center"><span style="color:#000000">Arial</span></td> 
   <td align="center"><span style="color:#ff6600">无宋体、无微软雅黑</span></td> 
  </tr> 
  <tr> 
   <td>iOS</td> 
   <td align="center">Helvetica Neue</td> 
   <td align="center">Heiti SC (黑体)</td> 
   <td align="center">Tahoma(v7.0)、Arial、Verdana、Georgia</td> 
   <td align="center"><span style="color:#ff6600"><span style="color:#000000">STHeiti(v7.0)、</span>无宋体、无微软雅黑</span></td> 
  </tr> 
  <tr> 
   <td>Mac OS X 10.6以下</td> 
   <td align="center">Helvetica Neue</td> 
   <td align="center">STHeiti (华文黑体)</td> 
   <td align="center">Tahoma、Arial、Verdana、Georgia</td> 
   <td align="center">宋体、<span style="color:#ff6600">无微软雅黑</span></td> 
  </tr> 
  <tr> 
   <td>Mac OS X 10.6及以上</td> 
   <td align="center">Helvetica Neue</td> 
   <td align="center">Hiragino Sans GB &nbsp;(冬青黑体简体中文)</td> 
   <td align="center">Tahoma、Arial、Verdana、Georgia</td> 
   <td align="center">宋体、<span style="color:#ff6600">无微软雅黑</span></td> 
  </tr> 
 </tbody> 
</table>

参考资料：[iOS6字体列表][iOS6]、[iOS7字体列表][iOS7]、[Mac OS X  10.6字体列表][Mac OS X _10.6]、[Mac OS X 10.7字体列表][Mac OS X 10.7] 等，在看了一些资料之后，对系统和浏览器下的字体就有了一个基本的认识。

有很多同学看到上面这些表格里面的结论，可能就会想到：可以只设置西文字体不设置中文字体。

只设置西文字体不设置中文字体是否可以？答案当然是不可以。因为上面这些系统和浏览器的默认字体也仅仅是是一个理想状态下的设置，这些默认字体仅限于浏览器或系统最初的默认字体。现在的手机都支持字体更换，对于浏览器而已也是如此，现在的浏览器都支持用户自己设置字体。因此，只设置西文字体而忽略中文字体设置是存在一定的危险性的。

对于现在Adroid系统的各种字体app，如：字体管家、字体管理等。如果用户自己下载相关的app字体软件将字体改掉，这种情况下，我们该如何处置？

如果用户将默认的系统字替换掉，那我们就只能用其他的中文字体来代替现实，然而就目前而言，移动端的中文字体非常少（几乎是唯一性），因此，本人还没有找到相应的解决办法，后期找到方法再分享出来。

[UED]: http://ued.ctrip.com/blog/?p=3589
[E5_AF_B9_E6_AF_94_E5_9B_BE.jpg]: http://ued.ctrip.com/blog/wp-content/uploads/2014/07/%E5%AF%B9%E6%AF%94%E5%9B%BE.jpg
[iOS6]: http://support.apple.com/kb/HT5484?viewlocale=zh_CN
[iOS7]: http://support.apple.com/kb/HT5878
[Mac OS X _10.6]: http://support.apple.com/kb/HT5154?viewlocale=zh_CN
[Mac OS X 10.7]: http://support.apple.com/kb/HT5098?viewlocale=zh_CN