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

这篇文章发布于 2018年03月24日,星期六,23:39,归类于 SVG相关。 阅读 34760 次, 今日 5 次 10 条评论

 

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

效果如下GIF截图:

文字大小自适应拉伸效果截图

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

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

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

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

文字大小小于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绘制的文本效果并不是矢量的,拉伸和缩放可能并不会很清晰。因此,并不是推荐的技术选型。

好,就说这些吧。

感谢阅读!

(本篇完)

分享到:


发表评论(目前10 条评论)

  1. 王小白说道:

    文字换行怎么办?高度自适应怎么办?

  2. 农业微信群大全说道:

    你这研究前端都已经要极致了吧

  3. HWTTT说道:

    我现在有个问题 我的文字是可以编辑的,所以当字体小于12号时,我需要怎么办。张锅有思路赐教吗

  4. 劲捷三脚架说道:

    话说调用GOOGLE字体是不是会影响网站打开速度?是不是要下载字体放回本地?

  5. binaryify说道:

    发现这个方法还可以突破网页字体最小10px的限制,感谢张鑫旭老师提供的灵感