css|面试官:让Chrome支持小于12px 的文字方式有哪些?区别?

一、背景

Chrome 中文版浏览器会默认设定页面的最小字号是12px,英文版没有限制

原由 Chrome 团队认为汉字小于12px就会增加识别难度

中文版浏览器
与网页语言无关,取决于用户在Chrome的设置里(chrome://settings/languages)把哪种语言设置为默认显示语言

系统级最小字号
浏览器默认设定页面的最小字号,用户可以前往 chrome://settings/fonts 根据需求更改

而我们在实际项目中,不能奢求用户更改浏览器设置

对于文本需要以更小的字号来显示,就需要用到一些小技巧

二、解决方案

常见的解决方案有:

zoom
-webkit-transform:scale()
-webkit-text-size-adjust:none
-webkit-transform:scale()
-webkit-text-size-adjuect:none

Zoom

zoom 的字面意思是“变焦”,可以改变页面上元素的尺寸,属于真实尺寸

其支持的值类型有:

zoom:50%,表示缩小到原来的一半
zoom:0.5,表示缩小到原来的一半
使用 zoom 来”支持“ 12px 以下的字体

代码如下:

<style type

你可能感兴趣的:(前端八股文,chrome,css,前端)