如何用纯CSS实现带描边的透明字体？求text-stroke替代方案

我希望通过纯CSS实现如图所示的带描边透明字体效果（图：带描边透明字体效果）。目前使用text-stroke属性尝试实现，但效果并不理想，代码示例如下：

font-size: 200px;
text-transform: uppercase;
stroke-width: 2px;
-webkit-text-stroke-color: var(--white);
-webkit-text-stroke-width: 5px;
color: transparent;

我的疑问：

1. 能否通过纯CSS达到目标效果？
2. 是否需要定制字体？
3. 由于text-stroke仅支持Webkit内核，是否有替代方案？

附完整代码片段：

.test {
  font-size: 200px;
    text-transform: uppercase;
    stroke-width: 2px;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 5px;
    color: transparent;
}

<html>
  <head>
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>    
  </head>
  <style>
body {
    font-family: 'Poppins';font-size: 22px;
}
</style>
<div class="test">
  Ciao!
</div>
</html>

解答 #

1. 纯CSS可以实现目标效果 #

你当前用的-webkit-text-stroke方案本身可行，效果不理想大概率是描边宽度与字体的适配问题。调整描边宽度值，再结合text-shadow优化边缘质感，能让描边更饱满：

.test {
  font-size: 200px;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
  color: transparent;
  /* Webkit内核描边 */
  -webkit-text-stroke: 3px black;
  /* 多层阴影强化描边质感（可选） */
  text-shadow: 
    0 0 0 black,
    0 0 0 black,
    0 0 0 black;
}

如果需要更细腻的描边，可调整text-shadow的层数来优化均匀度。

2. 不需要定制字体 #

除非你需要极端特殊的轮廓形状，否则纯CSS方案完全足够，没必要定制字体——定制字体成本高，灵活性远不如CSS方案。

3. 跨内核替代方案 #

针对-webkit-text-stroke的兼容性限制，有两种可靠的替代方案：

方案一：多层text-shadow模拟描边

通过给文字添加8个方向的text-shadow，模拟完整描边，所有主流浏览器都支持：

.test {
  font-size: 200px;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
  color: transparent;
  /* 8方向阴影模拟描边，调整px值控制粗细 */
  text-shadow: 
    2px 2px 0 black,
    -2px 2px 0 black,
    2px -2px 0 black,
    -2px -2px 0 black,
    2px 0 0 black,
    0 2px 0 black,
    -2px 0 0 black,
    0 -2px 0 black;
}

注意：描边过粗时可能出现角落不连贯，可通过增加阴影层数或微调偏移量优化。

方案二：SVG文字描边

用SVG的<text>元素实现描边，完全跨浏览器，效果精准稳定：

<svg width="100%" height="300px">
  <text x="50%" y="50%" text-anchor="middle" dy=".3em"
        font-size="200px"
        font-family="Poppins, sans-serif"
        text-transform="uppercase"
        fill="transparent"
        stroke="black"
        stroke-width="3">
    Ciao!
  </text>
</svg>

这种方案的描边效果最均匀，还能通过CSS控制SVG样式，保持和页面风格一致。

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