Multi-stroke text effect in CSS

CSS 中的多重描边文字效果

I used to see that retro multi-stroke text effect quite often and tried to replicate it using the CSS text-stroke property, but the results never quite matched. Because text-stroke accepts a single value, stacking elements was the only workaround I could think of, though it didn’t seem to work. 我过去经常看到那种复古的多重描边文字效果，并尝试使用 CSS 的 text-stroke 属性来复刻它，但效果总是不尽如人意。由于 text-stroke 只能接受单个值，我唯一能想到的变通方法就是堆叠元素，但这种方法似乎并不奏效。

One evening late last year, I was eager to give it another shot after seeing the text effect again in the book Graphic Japan: from woodblock and zen to manga and kawaii. I kept stacking several elements and accidentally varied the text-stroke-width for each layer. To my surprise, the result was getting closer this time. 去年年底的一个晚上，在《Graphic Japan: from woodblock and zen to manga and kawaii》一书中再次看到这种文字效果后，我迫不及待地想再试一次。我不断堆叠多个元素，并无意中为每一层设置了不同的 text-stroke-width。令我惊讶的是，这次的效果越来越接近了。

(Code snippets omitted for brevity)

How it works

原理说明

For different values of the text-stroke-width, browsers will automatically draw outlines of the character. The larger you set the stroke width, the thicker the outline will get, while still maintaining its original shape. 对于不同的 text-stroke-width 值，浏览器会自动绘制字符的轮廓。描边宽度设置得越大，轮廓就会越粗，同时仍能保持其原始形状。

The next step is to use different colors and put them in order. 下一步是使用不同的颜色并按顺序排列它们。

The interesting part is how the browsers outline the character shapes differently. FireFox offers smoother rendering than Chrome and Safari. 有趣的是，不同浏览器勾勒字符形状的方式有所不同。Firefox 提供的渲染效果比 Chrome 和 Safari 更平滑。

Another interesting part is when there are more text put inline, the character shapes will be merged. 另一个有趣的现象是，当内联放置更多文字时，字符形状会发生合并。

Trying different fonts

尝试不同的字体

The final result really depends on the font you choose. To help experiment with different fonts more quickly, I added the @google-font function for faster font loading. 最终效果很大程度上取决于你选择的字体。为了更快速地尝试不同字体，我添加了 @google-font 函数以实现更快的字体加载。

Unfortunately, the performance is as bad as CSS filters, especially when the font-size is getting bigger; you may have noticed some flickering above. It’s fine for experiments like this, or for generating images with css-doodle, but it’s not well-suited for production usage. 遗憾的是，其性能表现和 CSS 滤镜一样糟糕，尤其是当字体变大时；你可能已经注意到了上面的一些闪烁现象。这种方法适合像这样的实验，或者用于通过 css-doodle 生成图像，但并不适合生产环境使用。

More examples

更多示例

Here are two more examples to play around with different colors and characters, generated with css-doodle, just for fun. 这里还有两个使用 css-doodle 生成的示例，可以尝试不同的颜色和字符，纯属娱乐。

CodePen link for the first one: https://codepen.io/yuanchuan/pen/ogzarGo 第一个示例的 CodePen 链接：https://codepen.io/yuanchuan/pen/ogzarGo