如何用三角函数实现像素完美的text-shadow文字描边？

问题根源 #

-webkit-text-stroke 是浏览器针对文字轮廓的描边优化属性，当描边宽度超过2px左右的阈值时，会因文字路径转角、曲线的渲染逻辑限制，出现破损、锯齿或内部填充丢失的问题。而通过textShadow叠加多方向偏移阴影，能模拟出无破损的稳定粗描边效果。

正确实现方案 #

核心逻辑是：以文字中心为原点，按圆周均匀分布计算多个阴影偏移点，每个点的偏移量由描边宽度结合三角函数（sin/cos）计算得出，最终将所有阴影组合为text-shadow属性值。

完整代码示例 #

HTML结构

<h1 class="stroke-text">像素完美描边文字</h1>

CSS基础样式

.stroke-text {
  font-size: 64px;
  font-weight: bold;
  color: #fff; /* 文字填充色，需置于阴影上层 */
  text-shadow: none; /* 初始清空，由JS动态生成 */
}

JavaScript核心函数

function generateTextStroke(element, strokeWidth, strokeColor, shadowCount = 36) {
  const shadows = [];
  // 按圆周均分计算每个阴影的偏移坐标
  for (let i = 0; i < shadowCount; i++) {
    const angle = (i * 2 * Math.PI) / shadowCount;
    // 计算x、y方向偏移值并取整，避免亚像素模糊
    const x = Math.round(Math.cos(angle) * strokeWidth);
    const y = Math.round(Math.sin(angle) * strokeWidth);
    shadows.push(`${x}px ${y}px 0 ${strokeColor}`);
  }
  // 组合所有阴影赋值给元素
  element.style.textShadow = shadows.join(', ');
}

// 调用示例
const targetElement = document.querySelector('.stroke-text');
// 参数：目标元素、描边宽度(px)、描边颜色、阴影数量
generateTextStroke(targetElement, 8, '#000', 36);

参数说明 #

• element：需要添加描边的DOM元素
• strokeWidth：描边宽度（单位px，支持任意数值）
• strokeColor：描边颜色（支持所有CSS颜色格式）
• shadowCount：阴影数量（默认36，数量越多描边越平滑，建议取值24-72，平衡效果与性能）

关键细节 #

1. 取整处理：用Math.round()对偏移值取整，避免亚像素偏移导致的模糊，保证像素级精度
2. 阴影数量：36个点已能覆盖全方向，足以实现平滑的圆角描边；若追求极致平滑可提升至72
3. 阴影参数：模糊半径设为0，避免描边出现扩散模糊，确保描边边缘锐利

对比优势 #

• 彻底规避-webkit-text-stroke的破损问题，支持任意宽度的粗描边
• 无需依赖WebKit私有属性，跨浏览器兼容性更好
• 可通过调整阴影数量灵活控制描边平滑度

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