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

相关推荐
中微子几秒前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102416 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y32 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁38 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry38 分钟前
Fetch 笔记
前端·javascript
拾光拾趣录40 分钟前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟40 分钟前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构
写不出来就跑路1 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui