忠于品牌,精于技术

H5网站移动端页面字体应该怎么设置

移动端大小适配方面,我们采用的技术是基于 iPhone 6 为标准尺寸,字号动态调整方案;

在 iPhone 6 环境下;按照设计稿中的 pt/px 转为 rem 相对单位。

基于 root 的字体大小,不同终端(分辨率)动态调整。即在不同分辨率下,字体的大小会等比调整。这样做的好处是,整段文字在不同分辨率的手机上是等比展现,而非完全相同。

如图:

北京网站建设资讯 - 移动端相关技术说明 - (1)

北京网站建设资讯 - 移动端相关技术说明 - (2)

iPhone 6 和 iPhone 6p 在 root 字体大小上分别为 10px 、11.04px

正是由于这个细微差距,则所有子元素的字体都会遵循该基础字号进行动态的比例调整。

如果不采用这样的技术,而是粗暴的使用固定 px 单位且不做媒体查询进行区别对待;则可能会出现,小屏手机字显大,大屏手机字显小,且由于相同字号但不同宽度导致的换行,造成样式上的差异等其他不可控渲染效果。

移动端页面字体说明

中文字体方面,使用我们定义好的黑体降级方案(英文字体会按设计稿定制显示)

分别为(有则优先显示,否则顺延):

Apple System,Helvetica Neue,Helvetica,Nimbus Sans L,Arial,Liberation Sans,PingFang,冬青黑,思源黑体,微软雅黑,文泉驿微米黑,文泉驿正黑,华文黑体,中易黑体,文泉驿点阵正黑

原文出处:广漠传播 上海网站建设 (http://www.greatmo.com/works/website/promotion/241.html)