如何解决自定义文本高亮在不同浏览器中显示效果不一致的问题

问题根因 #

你当前的高亮效果依赖-webkit-text-stroke配合background-clip: text实现沿文本轮廓外扩的高亮区域，不同浏览器对文本描边的边缘渲染默认规则不同：Chrome默认文本描边连接处为锐角，Firefox默认做圆角处理，因此出现效果差异。

解决方案 #

这里提供两种落地方式，可根据你的需求选择：

方案1：换用常规行内高亮（兼容性最好，100%跨浏览器一致） #

如果不需要严格贴合文本字形的外扩高亮，只是要包裹文本的高亮块，直接调整CSS，放弃text-stroke+background-clip:text的方案，直接给a标签设置背景、内边距和圆角即可：

a {  
  text-decoration: none;
  font-weight: 900;
  font-size: 4vw !important;
  text-transform: capitalize !important;
  color: #0a0e0f !important;
  text-align: center !important;
  background: lightgrey !important;
  /* 移除原来的text-stroke和background-clip配置 */
  padding: 1.9vw 2vw; /* 上下内边距对应你原来的stroke宽度，左右保留原有值 */
  border-radius: 0; /* 要统一锐角就设0，要统一圆角就设对应数值即可 */
  font-style: italic !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

注意：这个方案没有兼容性问题，所有浏览器渲染效果完全一致

方案2：用SVG实现贴合文本轮廓的高亮（保留字形外扩效果，跨浏览器一致） #

如果必须保留沿文本轮廓外扩的高亮效果，改用SVG实现文本，通过SVG的描边属性统一控制边缘样式：

<div style="display: flex; justify-content: center; background: grey; height: 100vh;">
  <a href="https://utopistlist.com/edible-wild-plants/" style="position: absolute; top: 50%; transform: translateY(-50%); text-decoration: none;">
    <svg width="auto" height="4vw" viewBox="0 0 1200 80" style="overflow: visible;">
      <!-- 下层描边做高亮，linejoin设为miter就是锐角，设为round就是圆角，所有浏览器统一 -->
      <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-size="4vw" font-weight="900" font-style="italic" fill="lightgrey" stroke="lightgrey" stroke-width="3.8vw" stroke-linejoin="miter" stroke-linecap="square">
        Less Known But Common Edible Wild Plants
      </text>
      <!-- 上层正常文本 -->
      <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-size="4vw" font-weight="900" font-style="italic" fill="#0a0e0f">
        Less Known But Common Edible Wild Plants
      </text>
    </svg>
  </a>
</div>

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