CSS属性 -webkit-text-stroke文字描边探讨

目录
文章目录隐藏
  1. text-stroke 属性简介
  2. -webkit-text-stroke 是外描边,内描边还是居中描边
  3. text-shadow 与文字的外描边效果
  4. -webkit-text-stroke 与多重描边效果
  5. 小 tips
  6. 结语

很早以前在 Web 中要实现文本描边效果是没有直接的 CSS 属性可以实现的。一般都是通过其他的 CSS 属性来模拟需要的描边效果。最常见的就是使用 text-shadow。当然,在 SVG 或者 Canvas 中实现文本描述效果相对而言是要较为轻松。那么今天咱们就来看看如何在 Web 中实现文本描述效果。

text-stroke 属性简介

CSS text-stroke 属性的语法并不复杂,和 border,background 属性类似,其实是若干个 CSS 属性合并后的名称写法,不过仅仅是下面这两个 CSS 属性合体:text-stroke-width 和 text-stroke-color,也就是描边的宽度和描边的颜色,和 border 不同,对于 text-stroke 属性,我们无法指定描边的类型,只能是实线描边,不支持点线或者虚线,也无法指定描边是外描边还是内描边还是居中描边。

简单示意:

.stroke {
  -webkit-text-stroke: 2px red;
}

等同于:

.stroke {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: red;
}

另外,和 border 属性还有一个不同之处是宽度的默认值不一样。border-width 的默认值是 medium,最终表现等同于设置 3px,但是 text-stroke-width 的默认值确是 0,这就意味着,当我们使用 text-stroke 属性的时候,描边宽度是必不可少的,颜色理论上可以不设置,但是由于颜色缺省的时候会使用文字的 color 所谓描边色,导致最终的效果只是单纯的文字变得更壮实了,已然不是描边效果了,例如:

.stroke {
  font-size: 40px;
  -webkit-text-stroke: 2px;
}

然后下图是有描边和没有描边时候的对比图:

有描边和没有描边时候的对比图

-webkit-text-stroke 是外描边,内描边还是居中描边

答案是居中描边

要验证此观点,就弄个简单的 demo 就可以了

CSS 代码:
.p1,
.p2,
.p3 {
    font: menu;
    font-size: 40px;
    margin: 0;
}
.p2 {
    -webkit-text-stroke: 2px red;
}
.p3 {
    position: relative;
    z-index: 0;
}
.p3::before {
    content: attr(data-text);
    position: absolute;
    -webkit-text-stroke: 2px red;
    z-index: -1;
}
HTML 代码:
<p class="p1">没有描边</p>
<p class="p2">有描边</p>
<p class="p3">重叠描边</p>

效果图展示:

效果图展示

如果 text-stroke 是外描边,则上图最后两行文字红色部分大小应该是一样的;如果 text-stroke 是内描边,则最后文字重叠的时候,红色边框应该是看不见的;而最终的结果是,最后两行红色边框大小不一,差不多一半大小的样子,由此可以说明 text-stroke 是居中描边效果。

居中描边特性的应用

text-stroke 的居中描边特性,本质上让真实文本的字重削弱了,例如文字在页面上渲染时候,线条粗细大概是 1 像素,这时候我们设置个 1 像素宽的描边,则真实显示粗细岂不是只剩下 0.5 像素,如果真是这样,我们其实可以模拟 font-weight 属性的不同字重效果。

现代开源字体,你有思源黑体或者思源宋体,或者苹方字体都有丰富的字重,font-weight:100 和 font-weight:400 可以明显看出文字的粗细不一样,但是对于微软雅黑字体,由于字重的缺失,font-weight:100 和 font-weight:400 粗细都是一样的,都是正常粗细,这其实很难满足挑剔的设计师的需求,在一些弱表现场景,设计师其实希望我们这粗细更细一点,以营造更精致的感觉。在 OS X 苹果系的产品下很好实现,因此苹方等字体字重丰富,但是,在大头 windows 系统下,中文字体弱的很,除了正常和粗就没有其他表现。但是,有了 text-stroke 的居中描边特性,理论上,在 windows 系统也有了字重解决方案。

对于更大的字重,直接类似-webkit-text-stroke:1px 即可,关键是如何表现更小的字重。

1.文字所在背景是纯色

我们只要设置-webkit-text-stroke-color 描边颜色和背景色保持一致,就可以让文字变细了。话是这么讲没错,但是实际的效果……我们直接看图吧~

Chrome 浏览器下(左侧数值是描边大小,上面是字号设置大小):

文字所在背景是纯色

Firefox 浏览器下:

Firefox 浏览器下

可以看到最终的效果,似乎确实变细的,但是,又似乎不够细腻,尤其字号较小的时候,文字线条的边缘好像被狗啃了一样,并没有丝滑之感,我们不妨放大一探究竟:

效果放大后的呈现

由于鄙人的显示器屏幕密度有限,为 1,最小显示单位为 1 像素,所以,如果要想小数大小的描边效果生效,就需要特殊的文字边缘渲染算法进行视觉上的处理,而由于字符线条切线角度往往是不规则多变的,这就导致细节渲染上无法尽善尽美,于是视觉上会有某县线条位置会有“狗啃”的感觉。如果类似 iMac 这种 5K 屏幕,最小渲染单位为 0.2 像素,则显示效果一定非常细腻,这就是为什么高清屏显示效果更佳出众的原因。

但是,如果我们的文字字号比较大,例如 slogan 这种标题文字,则字号变细的效果则要好很多:

slogan 这种标题文字

2.文字所在背景非纯色

目前为止我还没想到什么好办法。

text-shadow 与文字的外描边效果

如果想要有文字的外描边效果,可以使用 CSS3 text-shadow 属性模拟,兼容 IE10+,例如:

.strok-outside {
    text-shadow: 0 1px red, 1px 0 red, -1px 0 red, 0 -1px red;
}

由于 text-shadow 不支持阴影扩展(box-shadow 支持),因此,我们使用四向阴影叠加实现,效果类似下面这样:

text-shadow 与文字的外描边效果

基本效果达成,但是,实际上,并不是真正外描边效果,因为一个矩形四面投影的时候,四个角实际上会有空隙,这就导致方方正正的汉字最终的外描边效果显得比较的圆润,有点幼圆字体的感觉。

如果设计师对外描边效果比较苛刻,可以使用-webkit-text-stroke 描边文字和非描边文字相互重叠覆盖的方法模拟,技巧就在于-webkit-text-stroke 描边文字的描边宽度要是要实现的外描边效果宽度的 2 倍。本文的第一个 demo 中的“重叠描边”实际上已经演示了如何操作,这里就不再展开啦!

-webkit-text-stroke 与多重描边效果

text-shadow 属性值可以不断累加,但是 text-stroke 属性却不行,如果想要实现多重描边效果,可以借助伪元素多层叠加模拟。

例如:

<p data-text="多重描边">多重描边</p>
CSS 代码:
p {
    -webkit-text-stroke: 1px #fff;
    font-size: 40px;
    position: relative;
    z-index: 0;
}
p::before,
p::after {
    content: attr(data-text);
    position: absolute; left: 0;
    z-index: -1;
}
p::before {
    -webkit-text-stroke: 7px yellow;
}
p::after {
    -webkit-text-stroke: 4px red;
}

最后效果这般丰富多彩:

-webkit-text-stroke 与多重描边效果

小 tips

webkit-background-clip: text;
-webkit-text-fill-color: transparent;

这个 CSS 声明组合可以让文字正体显示为背景模样,于是文字可以是渐变色或者甚至图案,再配合-webkit-text-stroke 描边,文本的表现力又可以更上一层楼。

Firefox 浏览器已经支持 webkit-background-clip:text 以及-webkit-text-fill-color 属性了,也就是说,文字渐变效果在 Firefox 浏览器下页已经可以无压力实现,至于 Edge 15,由于我身边并没有对应设备测试,所以并不确定结果,按照我的判断,应该也跟进支持了。希望有条件的小伙伴可以告知测试结果,我这里更新下

结语

以上就是今天为大家带来的使用 text-stroke 属性来实现文本描边效果。有了这个属性,咱们可以非常轻易的实现文本描边效果,也告别了使用 text-shadow 属性来模拟文本描边效果。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系maynote@foxmail.com处理
码云笔记 » CSS属性 -webkit-text-stroke文字描边探讨

发表回复