方案一 text-stroke

相关文档: MDN

<div class="text stroke">Kafuu Chino</div>
.text {
	font-size: 100px;
	color: white;
	font-weight: 400;
}

.stroke {
	-webkit-text-stroke: 4px #000;
}

注意: text-stroke 是居中描边，我们这里设置了 4px 的描边，实际上会在文字内部和外部各画2px。直接使用 text-stroke 来描边会让文字本身变瘦

效果如下:

Kafuu Chino

如果你不想要文字本身的宽度（白色部分）改变，那么可以用下面的技巧来实现

.text {
	font-size: 100px;
	color: white;
	font-weight: 400;
	position: relative;
	z-index: 0;
}

.text::after {
	content: attr(data-content);
	-webkit-text-stroke: 4px #000;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}

效果如下:

Kafuu Chino

方案二 SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="200">
 <text 
    class="text stroke"
    x="0" 
    y="0" 
    alignment-baseline="text-before-edge" 
    text-anchor="start"
  >
    Kafuu Chino
  </text>
</svg>
.text {
  font-size: 150px;
  fill: white;
  font-weight: 400;
}

.stroke {
  stroke: #000;
  stroke-width: 4px;
  paint-order: stroke; // 不让文字本身变瘦
}

效果如下:

Kafuu Chino

通过设置stroke + stroke-width 即可实现描边

注意：这里实现的效果也类似前面 text-stroke 的居中描边，实际上文字本身也变瘦了

为了不让文字本身变瘦，我们可以用 paint-order 属性来改变描边绘制的方式

该方案文字排版可能不够灵活 不能换行等操作

参考文章: CSDN