CSS文本多色描边实现（非SVG）及小字体描边异常解决

针对小字体下描边覆盖文本的问题，提供几个实用方案：

1. 用相对单位适配-webkit-text-stroke宽度 #

-webkit-text-stroke的宽度要和字体大小成比例，小字体时避免用固定px值，改用em/rem这类相对单位，确保描边不会超出文本范围：

.small-text {
  font-size: 1em;
  color: #000;
  -webkit-text-stroke-width: 0.05em; /* 按字体大小比例设置 */
  -webkit-text-stroke-color: #fff;
}
.large-text {
  font-size: 3em;
  color: #000;
  -webkit-text-stroke-width: 0.03em;
  -webkit-text-stroke-color: #fff;
}

这种方式能让不同字号的文本描边比例协调，不会出现小字体被描边完全覆盖的情况。

2. 多层text-shadow模拟自适应描边 #

如果需要更好的兼容性，或者更细腻的描边效果，可以用多层text-shadow叠加，并且用相对单位控制偏移量：

.text-stroke {
  color: #000;
  text-shadow: 
    /* 四基础方向阴影 */
    0.02em 0 0 #fff,
    0 0.02em 0 #fff,
    -0.02em 0 0 #fff,
    0 -0.02em 0 #fff,
    /* 斜向阴影填补间隙 */
    0.02em 0.02em 0 #fff,
    -0.02em -0.02em 0 #fff,
    0.02em -0.02em 0 #fff,
    -0.02em 0.02em 0 #fff;
}

用em作为偏移单位，阴影大小会随字体自动适配，小字体时描边不会过粗。

3. 伪元素实现独立描边层 #

对于需要厚重但不覆盖文本的描边，可以用伪元素生成一层描边文本放在原文本下方：

.text-stroke-pseudo {
  position: relative;
  color: #000;
}
.text-stroke-pseudo::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  -webkit-text-stroke-width: 0.08em;
  -webkit-text-stroke-color: #fff;
  z-index: -1;
}

HTML中需添加对应属性：

<span class="text-stroke-pseudo" data-text="小字体描边测试">小字体描边测试</span>

这种方法让描边和原文本分离，彻底避免覆盖问题，同时能实现更明显的描边效果。

内容的提问来源于stack exchange，提问作者Dmitry