iOS和android h5字体差异,关于移动hybrid开发中H5页面的字体应与系统保持一致的问题...

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

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.

简单地设置一下1

3body{

font-family: -apple-system;

}

完美！！字体完全一致。

虽然这个属性不兼容低版本的iOS系统，也不是规范(AppleWebkit的私有属性)，但是真的很cool。更巧的是，crosswalk也是基于AppleWebkit，所以如果你的原生app集成了crosswalk，那恭喜你，这方法完全能用。更更巧的是，咱们的Android就集成了crosswalk(这其实很正常)，所以安卓的也算是解决了。

那低版本的iOS7，8怎样解决呢？1

3body{

font-family: -apple-system, "Helvetica";

}

完美！

iOS和android h5字体差异,关于移动hybrid开发中H5页面的字体应与系统保持一致的问题...相关推荐

Hybrid App中原生页面 VS H5页面
Hybrid App中原生页面 VS H5页面现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有"混合的"意思). Native ...
Android开发中横竖屏切换的问题以及系统提供的常用Activity
Android开发中横竖屏切换的问题以及系统提供的常用Activity(总结) 2018年06月28日 16:18:45 北极熊的微笑阅读数:72 横竖屏切换与状态保存的问题前面也也说到了App横 ...
同花顺ios与android,iOS与Android的交互差异
平常用的是iOS设备,每次把玩安卓测试机都会有些不习惯.对于一些小厂来讲,由于资源有限,一般安卓和i设计稿都通用一个设计稿.虽然现在ios和安卓在设计方面越来越趋同,但还是有些差异化的地方,不然在开发 ...
iOS开发中使用UILabel设置字体的相关技巧小结
这篇文章主要介绍了iOS开发中UILabel设置字体的相关技巧小结,代码基于传统的Objective-C,需要的朋友可以参考下一.初始化复制代码代码如下: UILabel *myLabel = [ ...
Android产品研发（十七）--Hybrid开发
转载请标明出处:一片枫叶的专栏上一篇文章中我们介绍了Android开发中经常会涉及到但又常常被忽视掉的开发者模式.主要讲解了包括如何打开手机的开发者模式,开发者模式中各个菜单的意义和作用,如何清除手 ...
android怎么监听多点触摸_Android开发中多点触摸的实现方法
Android多点触控需要LCD驱动和程序设计支持,其实我们只要采用电容屏触摸手机的技术即可,接下来,就让爱站技术频道小编来讲解Android开发中多点触摸的实现方法吧! 多点触摸技术在实际开发过程中 ...
Hybrid App中原生页面 VS H5页面（分享）
本文部分转自 http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有" ...
android 模糊查询搜索框_彻底搞懂 iOS 和 Android 的设计差异
设计经验分享 · 不定时更新 ------------------------------------------- 胡桃子深圳 | UI/UX设计师唧唧歪歪:设计师在做 app 的时候很少考虑两 ...
ios android 设计图,帮你彻底搞懂 iOS 和 Android 的设计差异
iOS与安卓设计上的差异主要从系统差异.成本考虑.用户习惯3个方面来阐述. 一. 系统差异 1. 物理按键对返回的影响安卓的物理按键以及屏幕导航按键的差异是安卓的返回键更加方便, iOS只有home ...

iOS和android h5字体差异,关于移动hybrid开发中H5页面的字体应与系统保持一致的问题...

iOS和android h5字体差异,关于移动hybrid开发中H5页面的字体应与系统保持一致的问题...相关推荐

最新文章

热门文章