欢迎, 游客
用户名: 密码: 记住我

主题: 手机移动端web字体设置

手机移动端web字体设置 2017-03-28 16:04 #2382

  • 三义石
  • 三义石的头像
  • 离线
  • 技术专家
  • 帖子: 57
  • 声望: 3
pc端web设计默认字体通常使用微软雅黑和宋体,但手机移动端并没有微软雅黑字体,微软雅黑字体并不适合移动端web页面开发,下面列出手机端安卓/IOS系统的自带字体作为参考:

ios 系统自带字体
ios默认中文字体是STHeiti(苹果黑体)
ios默认英文字体是Helvetica
ios默认数字字体是HelveticaNeue
无微软雅黑字体

android 系统自带字体
Android默认中文字体是Droidsansfallback(华文中宋)
Android默认英文和数字字体是Droid Sans
无微软雅黑字体

winphone 系统
默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe
无微软雅黑字体

经过在ios、android和winphone 三种手机上中文字体和英文字体的测试,我们可以看出三种不同的中文字体和微软雅黑一样是无衬线字体,有无衬线只是一个小原因,而无论页面中使用哪种字体,肉眼很难看出它们的差异,对产品的体验几乎没有影响。使用系统默认的字体所达到的视觉效果跟使用微软雅黑字体没有明显的差别。

结论:各个手机系统有自己的默认字体,且都不支持微软雅黑。如无特殊需求,手机端无需定义中文字体,使用系统默认英文字体和数字字体可使用 Helvetica ,三种系统都支持。建议:英文和数字都设定为 Helvetica,因为在ios中默认的英文和数字是两种不同的字体,如果不设置成一种字体,显示效果不一样。
本论坛禁止游客发帖。

手机移动端web字体设置 2017-03-28 16:07 #2383

  • 三义石
  • 三义石的头像
  • 离线
  • 技术专家
  • 帖子: 57
  • 声望: 3
所以,有些人困惑,不管设置了什么字体,在手机上都会被手机系统改为默认字体,就是这个原因。

如果非要达到一致,请把你想设置的字体放到服务器,或者使用开源的CDN字体,在加载css的时候,预先加载字体文件到客户端浏览器。
在css的最前面可以这样写下

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
本论坛禁止游客发帖。
返回页顶