webkit内核下，字号会自动放大的问题

YancyYe 发布于2019-08-29 11:26 / 2765人阅读

摘要：内核下，字号会自动放大的问题问题描述有时候在做移动端页面的时候，会发现某些字体会自动放大而页面中另一部分却是对的，放大的比例看上去还没啥规律，很是诡异。

webkit内核下，字号会自动放大的问题

blog
github

问题描述

有时候在做移动端页面的时候，会发现某些字体会自动放大（而页面中另一部分却是对的- -），放大的比例看上去还没啥规律，很是诡异。

一探究竟

网上一通搜索，还真搜出来了。

首先，这个不是bug，是Chromium内核提高移动端文本可读性的一个特性，叫做这个特性被称做「Text Autosizer」，又称「Font Boosting」、「Font Inflation」，具体可以见这个文档Chromium’s Text Autosizer，计算规则则可以在这里看到TextAutosizer.cpp,在文档里可以看到计算公式如下

multiplier = Math.max(1, deviceScaleAdjustment * textScalingSlider * systemFontScale * clusterWidth / screenWidth);
if (originFontSize < 16) {
    computedFontSize = originFontSize * multiplier;
}
else if (16 <= originFontSize <= (32 * multiplier - 16)) {
    computedFontSize = (originFontSize / 2) + (16 * multiplier - 8);
}
else if (originFontSize > (32 * multiplier - 16)) {
    computedFontSize = originFontSize;
}

变量解释：

originFontSize: 原始字体大小

computedFontSize: 经过计算后的字体大小

multiplier: 换算系数，值由以下几个值计算得到deviceScaleAdjustment:
当指定 viewport width=device-width 时此值为 1，否则值在 1.05 - 1.3 之间，有专门的计算规则

textScalingSlider: 浏览器中手动指定的缩放比例，默认为 1
systemFontScale: 系统字体大小，Android设备可以在「设备 - 显示 - 字体大小」处设置，默认为 1
clusterWidth: 应用 Font Boosting 特性字体所在元素的宽度（如何确定这个元素请参考上边两个链接）
screenWidth: 设备屏幕分辨率（DIPs, Density-Independent Pixels），如 iPhone 5 为 320

解决问题

其实嘛，解决起来还是容易的~

给元素指定宽高

试了下给元素多带带设置width或height或max-height即可禁用Text Autosizer

使用-webkit-text-size-adjust

给元素设置 -webkit-text-size-adjust: none;可禁用Text Autosizer，这个属性还能使得我们在移动端使用小于12px的字体。此属性在桌面版中无效。

参考资料

flexible.js字体大小诡异现象解析及解决方案

网页字体缩放样式-webkit-text-size-adjust的用法详解

以上。

new game！

GPU云服务器云服务器弹性伸缩的ECS会自动释放吗内核问题 linux 内核编译问题腾讯云服务器会自动重启

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111644.html

webkit内核下，字号会自动放大的问题

摘要：内核下，字号会自动放大的问题问题描述有时候在做移动端页面的时候，会发现某些字体会自动放大而页面中另一部分却是对的，放大的比例看上去还没啥规律，很是诡异。 webkit内核下，字号会自动放大的问题 bloggithub 问题描述有时候在做移动端页面的时候，会发现某些字体会自动放大（而页面中另一部分却是对的- -），放大的比例看上去还没啥规律，很是诡异。 showImg(https://...

CoXie 2019-08-01 15:51 评论0 收藏0
关于响应式布局，你必须要知道的

摘要：本文主要介绍一些响应式布局容易忽略但又很重要的知识点。单位不仅仅可以用来设置字号，还可以设置任何盒模型的属性，比如有一点优势就是可以和媒体查询配合，实现响应式布局运用场景如果我们做的页面只在移动端访问，这是因为不兼容低版本的浏览器。一、前言响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。...

Eirunye 2019-08-02 11:56 评论0 收藏1
关于响应式布局，你必须要知道的

摘要：本文主要介绍一些响应式布局容易忽略但又很重要的知识点。单位不仅仅可以用来设置字号，还可以设置任何盒模型的属性，比如有一点优势就是可以和媒体查询配合，实现响应式布局运用场景如果我们做的页面只在移动端访问，这是因为不兼容低版本的浏览器。一、前言响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。...

nevermind 2019-08-29 17:11 评论0 收藏0
关于响应式布局，你必须要知道的

摘要：本文主要介绍一些响应式布局容易忽略但又很重要的知识点。单位不仅仅可以用来设置字号，还可以设置任何盒模型的属性，比如有一点优势就是可以和媒体查询配合，实现响应式布局运用场景如果我们做的页面只在移动端访问，这是因为不兼容低版本的浏览器。一、前言响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。...

amuqiao 2019-08-23 12:45 评论0 收藏0