css兼容问题之文本描边篇 text-stroke 和 text-shadow

colezhou
9,951 阅读3分钟

通过此文，你能了解到：

  1. 使用css属性设置文本描边的方法；
  2. 在浏览器中对于文本描边属性 text-stroke 的支持程度以及其替换属性 text-shadow 的应用。

什么是文本描边 text-stroke

text-stroke 是一个css复合属性，用于设置或检索对象中的文字的描边，在浏览器兼容上面表现较差。它包含了两个属性：text-stroke-width 和 text-stroke-color，它们分别用于设置描边厚度和描边颜色。

text-stroke support.png

最近就发现了 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;
}

描边正常和异常情况的示例图如下：

css_sprites.png

尝试过各种兼容性写法，都不能解决这个问题。查看资料发现 text-stroke 其实并没有出现在任何 W3C 规范中，它曾经只作为文字描边属性短暂包含在规范中，但现在已被删除。

同时它只在 Firefox 和 Edge 上能够通过使用-webkit-text-stroke属性支持该效果（没有-moz-或-ms-前缀写法的浏览器支持）。

那么我们用什么办法去解决这个问题呢？

既然 text-stroke 存在问题，那我们看下另外有没有可以替换它效果的属性就好了，经发现在 css3 版本中存在一个叫 text-shadow 的文本阴影属性也可以满足我们想要的效果。

了解文本阴影 text-shadow

text-shadow 是 css3 版本中推出的一个新的属性，它被用于向文本设置阴影效果，其在浏览器兼容方面表现很好。

text-shadow support.png

简单应用示例代码如下：

.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;
}

表现示例图如下：

css_sprites (1).png

具体属性值的含义这里就不详细介绍了，大家可以自己去了解一下，在这里要说一下 text-shadow 和 text-stroke 两个属性在视觉方面的表现区别。

text-stroke 属于文本内部描边，它是通过压榨文字内部空间实现的。比如一个白色的文字笔画线条粗细是4px，如果 text-stroke 设置的是一个2px厚度的黑色描边，那么这个文字的实际表现是：2px黑色描边 和 2px白色填充。

text-shadow 则表现为文本外部描边，它相当于给文字的外部穿上了一层外套。同样4px粗细的文字笔画线条，其设置属性2px厚度的黑色文本阴影，这个文字的表现是：2px黑色描边 和 4px白色填充。

总体来说，两者视觉上表现稍有差异，但是在设置的描边厚度比较小的情况下基本是类似的，而且从使用上来说， text-shadow 其实更贴合实际应用，所以我们完全可以直接使用 text-shadow 来给文本实现描边效果。

avatar
文章
阅读
粉丝