通过此文,你能了解到:
- 使用css属性设置文本描边的方法;
- 在浏览器中对于文本描边属性
text-stroke
的支持程度以及其替换属性text-shadow
的应用。
什么是文本描边 text-stroke
text-stroke
是一个css复合属性,用于设置或检索对象中的文字的描边,在浏览器兼容上面表现较差。它包含了两个属性:text-stroke-width
和 text-stroke-color
,它们分别用于设置描边厚度和描边颜色。
最近就发现了 text-stroke
存在的一个兼容问题,在某些情况下,描边文字笔画的连接处会出现描边重叠颜色加深的现象,这对于视觉体验来说非常糟糕。目前发现其出现场景在 华为P40、华为mate 30pro和华为mate 20pro等机型 的微信小程序中。简单示例代码如下:
<!-- 正常网页场景页面结构 -->
<div class="class-font">添加了黑色描边的白色字体</div>
<!-- 微信小程序场景页面结构 -->
<view class="class-font">添加了黑色描边的白色字体</view>
.class-font {
font-size: 24px;
color: #fff;
-webkit-text-stroke: 1px black;
text-stroke: 1px black;
}
描边正常和异常情况的示例图如下:
尝试过各种兼容性写法,都不能解决这个问题。查看资料发现 text-stroke
其实并没有出现在任何 W3C 规范中,它曾经只作为文字描边属性短暂包含在规范中,但现在已被删除。
同时它只在 Firefox 和 Edge 上能够通过使用-webkit-text-stroke
属性支持该效果(没有-moz-
或-ms-
前缀写法的浏览器支持)。
那么我们用什么办法去解决这个问题呢?
既然 text-stroke
存在问题,那我们看下另外有没有可以替换它效果的属性就好了,经发现在 css3 版本中存在一个叫 text-shadow
的文本阴影属性也可以满足我们想要的效果。
了解文本阴影 text-shadow
text-shadow
是 css3 版本中推出的一个新的属性,它被用于向文本设置阴影效果,其在浏览器兼容方面表现很好。
简单应用示例代码如下:
.class-font {
font-size: 24px;
color: #fff;
text-shadow: 1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
表现示例图如下:
具体属性值的含义这里就不详细介绍了,大家可以自己去了解一下,在这里要说一下 text-shadow
和 text-stroke
两个属性在视觉方面的表现区别。
text-stroke
属于文本内部描边,它是通过压榨文字内部空间实现的。比如一个白色的文字笔画线条粗细是4px,如果 text-stroke
设置的是一个2px厚度的黑色描边,那么这个文字的实际表现是:2px黑色描边 和 2px白色填充。
text-shadow
则表现为文本外部描边,它相当于给文字的外部穿上了一层外套。同样4px粗细的文字笔画线条,其设置属性2px厚度的黑色文本阴影,这个文字的表现是:2px黑色描边 和 4px白色填充。
总体来说,两者视觉上表现稍有差异,但是在设置的描边厚度比较小的情况下基本是类似的,而且从使用上来说, text-shadow
其实更贴合实际应用,所以我们完全可以直接使用 text-shadow
来给文本实现描边效果。