让Chrome⽀持⼩于12px 的⽂字⽅式有哪些?区别?

让Chrome⽀持⼩于12px 的⽂字⽅式有哪些?区别?

1、背景

Chrome 中⽂版浏览器会默认设定⻚⾯的最⼩字号是12px,英⽂版没有限制 原由 Chrome 团队认为汉字⼩于12px就会增加识别难度

• 中⽂版浏览器 与⽹⻚语⾔⽆关,取决于⽤户在Chrome的设置⾥(chrome://settings/languages)把哪种语⾔设置 为默认显⽰语⾔

• 系统级最⼩字号 浏览器默认设定⻚⾯的最⼩字号,⽤户可以前往 chrome://settings/fonts 根据需求更改 ⽽我们在实际项⽬中,不能奢求⽤户更改浏览器设置 对于⽂本需要以更⼩的字号来显⽰,就需要⽤到⼀些⼩技巧

2、 解决⽅案

常⻅的解决⽅案有:

• zoom

• -webkit-transform:scale()

• -webkit-text-size-adjust:none

2.1 Zoom

zoom 的字⾯意思是"变焦",可以改变⻚⾯上元素的尺⼨,属于真实尺⼨ 其⽀持的值类型有:

• zoom:50%,表⽰缩⼩到原来的⼀半

• zoom:0.5,表⽰缩⼩到原来的⼀半

使⽤ zoom 来"⽀持" 12px 以下的字体

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小于12px文字</title>
  <style type="text/css">
    .span1 {
      font-size: 12px;
      display: inline-block;
      zoom: 0.8;
    }

    .span2 {
      display: inline-block;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <span class="span1">测试10px</span> 
  <span class="span2">测试12px</span>
</body>
</html>

效果如下:

需要注意的是, Zoom 并不是标准属性,需要考虑其兼容性

2.1 -webkit-transform:scale()

针对 chrome 浏览器,加 webkit 前缀,⽤ transform:scale() 这个属性进⾏放缩 注意的是,使⽤ scale 属性只对可以定义宽⾼的元素⽣效,所以,下⾯代码中将 span 元素转为⾏ 内块元素

实现代码如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小于12px文字</title>
  <style type="text/css">
    .span1 {
      font-size: 12px;
      display: inline-block;
      -webkit-transform:scale(0.8);
    }

    .span2 {
      display: inline-block;
      font-size: 12px;
    }
    .span3 {
      display: inline-block;
      font-size: 14px;
    }
  </style>
</head>

<body>
  <span class="span1">测试10px</span> 
  <span class="span2">测试12px</span>
  <span class="span3">测试14px</span>
</body>
</html>

效果如下:

2.1 -webkit-text-size-adjust:none

该属性⽤来设定⽂字⼤⼩是否根据设备(浏览器)来⾃动调整显⽰⼤⼩

属性值:

• percentage:字体显⽰的⼤⼩;

• auto:默认,字体⼤⼩会根据设备/浏览器来⾃动调整;

• none:字体⼤⼩不会⾃动调整

html 复制代码
html { -webkit-text-size-adjust: none; }

这样设置之后会有⼀个问题,就是当你放⼤⽹⻚时,⼀般情况下字体也会随着变⼤,⽽设置了以上代 码后,字体只会显⽰你当前设置的字体⼤⼩,不会随着⽹⻚放⼤⽽变⼤了

所以,我们不建议全局应⽤该属性,⽽是单独对某⼀属性使⽤

需要注意的是,⾃从 chrome 27 之后,就取消了对这个属性的⽀持。同时,该属性只对英⽂、数字 ⽣效,对中⽂不⽣效

3.、总结

Zoom ⾮标属性,有兼容问题,缩放会改变了元素占据的空间⼤⼩,触发重排

-webkit-transform:scale() ⼤部分现代浏览器⽀持,并且对英⽂、数字、中⽂也能够⽣效, 缩放不会改变了元素占据的空间⼤⼩,⻚⾯布局不会发⽣变化

-webkit-text-size-adjust 对⾕歌浏览器有版本要求,在27之后,就取消了该属性的⽀持,并 且只对英⽂、数字⽣效

相关推荐
xjt_09012 分钟前
浅析Web存储系统
前端
foxhuli22939 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺1 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
孤水寒月2 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu2 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp