如何用CSS实现带无扭曲黑色边框的半透明白色文字？

给你几个针对Montserrat字体的可行方案，解决文字扭曲问题：

方案一：调整-webkit-text-stroke参数 #

之前用2px描边导致扭曲，主要是因为Montserrat作为无衬线字体，过粗的描边会挤压字形。可以减细描边宽度，搭配合适的字重提升可读性：

.your-text-class {
  font-family: Montserrat, sans-serif;
  font-weight: 600; /* 加粗字体，增强描边后的视觉稳定性 */
  color: rgba(255, 255, 255, 0.8);
  -webkit-text-stroke: 1px black; /* 降低描边宽度至1px */
  text-stroke: 1px black; /* 兼容标准浏览器 */
  -webkit-font-smoothing: antialiased; /* 优化渲染，减少锯齿 */
}

如果坚持要2px粗边框，可尝试保留-webkit-font-smoothing: antialiased，部分场景下能缓解扭曲。

方案二：优化text-shadow实现完整边框 #

之前的4方向阴影会有角落缺口，改成8方向+中心阴影，模拟实心边框，完全不修改原文字字形：

.your-text-class {
  font-family: Montserrat, sans-serif;
  color: rgba(255, 255, 255, 0.8);
  text-shadow:
    0 0 0 #000,
    1px 0 0 #000,
    -1px 0 0 #000,
    0 1px 0 #000,
    0 -1px 0 #000,
    1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000;
}

这种方式不会对原文字造成任何扭曲，若需要更粗的边框，可按比例增加阴影的偏移量（比如2px偏移）。

方案三：伪元素叠加法（粗边框首选） #

如果必须要2px以上的粗边框，用伪元素生成底层黑色边框文字，上层放置半透明白色文字，彻底分离字形与边框：

<!-- HTML结构 -->
<div class="text-box" data-text="你的目标文字">你的目标文字</div>

.text-box {
  position: relative;
  font-family: Montserrat, sans-serif;
  color: rgba(255, 255, 255, 0.8);
}

.text-box::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: black;
  -webkit-text-stroke: 2px black; /* 自由设置边框宽度 */
  text-stroke: 2px black;
  z-index: -1; /* 把边框文字放到原文字下方 */
}

这种方法完全避免原文字被描边影响，扭曲问题彻底解决，且边框宽度可随意调整。

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