当前位置：首页 > article >正文

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

article 2025/1/24 14:39:05

让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 以下的字体

<!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 元素转为⾏内块元素
实现代码如下：

<!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 { -webkit-text-size-adjust: none; }

这样设置之后会有⼀个问题，就是当你放⼤⽹⻚时，⼀般情况下字体也会随着变⼤，⽽设置了以上代码后，字体只会显⽰你当前设置的字体⼤⼩，不会随着⽹⻚放⼤⽽变⼤了
所以，我们不建议全局应⽤该属性，⽽是单独对某⼀属性使⽤
需要注意的是，⾃从 chrome 27 之后，就取消了对这个属性的⽀持。同时，该属性只对英⽂、数字⽣效，对中⽂不⽣效

3.、总结

Zoom ⾮标属性，有兼容问题，缩放会改变了元素占据的空间⼤⼩，触发重排
-webkit-transform:scale() ⼤部分现代浏览器⽀持，并且对英⽂、数字、中⽂也能够⽣效，缩放不会改变了元素占据的空间⼤⼩，⻚⾯布局不会发⽣变化
-webkit-text-size-adjust 对⾕歌浏览器有版本要求，在27之后，就取消了该属性的⽀持，并且只对英⽂、数字⽣效

查看全文

http://www.kler.cn/a/369942.html