0、问题来源
在移动hybrid开发，也就是说，部分页面会使用html+css+javascript技术来制作，例如个人中心，收藏页面等。一般来说，移动端都会将字体设置为system系统默认类型。起初，愚钝的我认为，只要在css里不设置任何字体，将会默认使用系统默认字体。然而结果并未如我所想，页面出来后，中文、英文和数字几乎是3种不同的字体，而且没有一类是和移动端的字体相同。
1、浏览器默认字体
基于上述的问题，我google了一下iOS和Android的默认字体。找到了一篇大概如下：
1.1、iOS系统（感觉很正确）
- 默认中文字体是Heiti SC
- 默认英文字体是Helvetica
- 默认数字字体是HelveticaNeue
- 无微软雅黑字体
1.2、Android系统
- 默认中文字体是Droidsansfallback
- 默认英文和数字字体是Droid Sans
- 无微软雅黑字体
然后，我将上面的字体对应系统地测试了一遍，结果，也没有一款字体是和原生页面中的字体相同。
那么在此时，我突然觉得有个问题maybe理解错了，就是webview的默认字体和app级别的默认字体是同一回事么？从上面的测试，我觉得应该是不同的（当然也有可能是我找到的字体其实也是错的）。但就算是相同，每个系统的字体也不一定都一样，特别是android，各种字体乱来，如果按照不同的系统来配置字体，简直会让人疯掉。
然后我再去google…
2、css设置system默认字体: -apple-system
最终，我找到了-apple-system，一个AppleWebkit里独有的属性。
On iOS 9 and OS X 10.11, doing this allows you to use Apple’s new system font, San Francisco(打脸). On platforms which do not support -apple-system, the browser will simply fall back to the next item in the font-family fallback list.
简单地设置一下
|
|
完美！！字体完全一致。
虽然这个属性不兼容低版本的iOS系统，也不是规范（AppleWebkit的私有属性），但是真的很cool。更巧的是，crosswalk也是基于AppleWebkit，所以如果你的原生app集成了crosswalk，那恭喜你，这方法完全能用。更更巧的是，咱们的Android就集成了crosswalk(这其实很正常)，所以安卓的也算是解决了。
那低版本的iOS7，8怎样解决呢？
|
|
完美！