尝试解决浏览器限制不能显示字体大小低于12px的问题

尝试解决浏览器限制不能显示字体大小低于12px的问题

• 1：打开浏览器设置，找到字体最小字号，设置为0就好了，但用户不是每个人都能接受

• 2：采用css 提供的transform:scale(); 缩放方法

  缺点：缩小后字体会模糊，有时用户不能接受
  

• 3：采用svg来解决，svg是矢量图 缩放不影响图片质量，实现方法

  最外层设置字体大小，字体渲染在2个标签，span标签字体放大10倍，获取这时字体span标签的宽高
  然后svg标签的宽高是span标签的宽高/10 向上取整
  

 <div class="text">
    <span id="span">
      这是字体
    </span>
    <svg id="svg">
      <text y="1.01em">{这是字体</text>
    </svg>
  </div>

const width=span.clientWidth
const height=span.clientHeight
svg.setAttribute('width',Math.ceil(width/10))
svg.setAttribute('height',height/10)

 .text{
  font-size:10px;
 }
 
 .text span{
    display: inline-block;
    font-size: 1000%;
    position: fixed;
    opacity: 0;
    z-index: -100;
    width: max-content;
 }

svg方法可以解决单行文本文字的12px限制问题 但svg文字换行实现多行显示 目前还没有解决思路