css，不止“突破浏览器12px限制”

最新推荐文章于 2024-12-17 22:29:05 发布

原创

最新推荐文章于 2024-12-17 22:29:05 发布 · 681 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

本文探讨了如何使用SVG和CSS新特性`size-adjust`来突破浏览器对12px文字尺寸的限制。通过SVG，可以将文字视为矢量图像，保持清晰度。而`size-adjust`特性则允许调整字体大小，不受12px限制。同时，文章提到了`@font-face`的加载策略和优化注意事项。

之前写过一篇文章小tips：如何摆脱浏览器下12px的限制，不少人觉得“有点东西”。文中提到的“transform: scale()”方法也是利用了CSS中 transform 的特点，可以说兼顾了效果和性能。但是它必须考虑height甚至在“动态多行”效果时要用 JS 辅助的特点也很是让人头疼。

其实还可以用两种方法解决这个限制：

SVG解决文字12px限制

SVG 本质上你可以看成是一张图片，给图片设置width:100%就能够跟随容器尺寸拉伸，SVG 也是如。并且由于 SVG 是矢量的，因此，再怎么拉伸我们的文字效果都是清晰细腻的 —— 这种方法的原理就在于此！

SVG 中<text>，<tspan>元素可以用来呈现文本，嵌套关系为<text> -> <tspan>，个人觉得和HTML中的<p> -> <span>关系类似。拿开篇文章中的案例来说，用 svg 可以这么写：

<div class="mmcce-text" 
    v-for="(item, index) in couponInfo.thresholdStr" 
    :key="index" 
    :index="index"
>
	<svg width="600" height="80" viewBox="0 0 600 80">
    	<text font-family="'PingFang SC','Microsoft Yahei'" font-size="60" x="0" y="1em">{
  
  {item}}</text>
	</svg>
</div>

简单来说就是先绘制一张大图，然后再缩小</