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

之前写过一篇文章小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