让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之后,就取消了该属性的⽀持,并 且只对英⽂、数字⽣效

相关推荐
魔云连洲14 分钟前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年17 分钟前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒23 分钟前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku30 分钟前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing35 分钟前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_4569042736 分钟前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说39 分钟前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日4567044 分钟前
学习日记-HTML-day51-9.9
前端·学习·html
狗头大军之江苏分军1 小时前
iPhone 17 vs iPhone 17 Pro:到底差在哪?买前别被忽悠了
前端
小林coding1 小时前
再也不怕面试了!程序员 AI 面试练习神器终于上线了
前端·后端·面试