by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=7445
本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。

一、文本大小自适应效果抢先体验

效果如下GIF截图：

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

您可以狠狠地点击这里：SVG实现文字大小跟随容器自动变化demo

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

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

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

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

例如：

.slogon { 
  font-size: 10vw;
}

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

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

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

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文本效果，然后当做图片来缩放处理即可。

四、如果是要canvas来实现呢？

canavs本质上也是图片，但是，canvas绘制的文本效果并不是矢量的，拉伸和缩放可能并不会很清晰。因此，并不是推荐的技术选型。

好，就说这些吧。

感谢阅读！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=7445

（本篇完）