借助SVG文字尺寸自动缩放甚至突破Chrome 12px限制

一、文本font-size大小自适应SVG实现方法

文字大小尺寸跟着容器的尺寸变化。

这对于一些需要尺寸自适应的slogon内容就很实用，例如移动端320~414宽度间的自适应。

并且，如果你足够细心，会发现，当缩到足够小的，在Chrome浏览器下，文字的尺寸居然小于12px了！

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

SVG中<text>，<tspan>元素可以用来呈现文本，嵌套关系为<text> -> <tspan>，个人觉得和HTML中的<p> -> <span>关系类似。

textLength属性可以控制文本占据的宽度大小，缺省则自然排列，如果数值比较小，则文字会挤成一团，类似这样：

如果数值较大，就会拉得很开：

lengthAdjust等属性可以对文本拉伸或收缩的方式进行设置，默认情况都是字符之间空隙拉伸（lengthAdjust="spacing"），类似CSS中的letter-spacing属性。我们还可以有其他设置，此时SVG就出现了比CSS文本更加丰富的呈现。

例如，设置lengthAdjust="spacingAndGlyphs"则就连同字符图形本身一起拉伸：

还有x, y设置坐标位置，dx, dy属性设置相对坐标偏移等等。相关属性还比较多，就不一一展开了。

回到本例，本例子一开始的GIF效果实现相对简单，SVG代码如下：

<svg width="600" height="80" viewBox="0 0 600 80">

    <text font-family="'PingFang SC','Microsoft Yahei'" font-size="60" x="0" y="1em">CSS世界这本书不错！</text>

</svg>

然后加一行：

svg {

    width: 100%;

}

就实现了。

一句话概括就是：老老实实大尺寸实现个SVG文本效果，然后当做图片来缩放处理即可。

二、文本大小自适应效果纯CSS实现方法

纯CSS方法也是可以实现文字尺寸跟随变化效果的，主要是借助CSS3中的vw单位，将CSS的font-size大小和网页视区宽度vw相关联。可参见之前文章：“基于vw等视区单位配合rem响应式排版和布局”。

例如：

.slogon {

  font-size: 10vw;

}

但通常实际开发的时候，要比上面的CSS复杂，通常需要借助calc()计算。如果文本是局部容器自适应，那就更麻烦，实现起来还是有些啰嗦的，也没有更容易理解更好实现的方法呢？

有，借助SVG，兼容性和vw一致。

注：转载地址：https://www.zhangxinxu.com/wordpress/?p=7445