添加自定义font-family行内样式后超链接失效问题排查

在编辑表格布局的EDM时，遇到一个怪异问题：给元素添加自定义字体Gotham的行内样式后，字体显示完全正常，但超链接彻底无法点击。已经排除了引号、后备字体等常见问题，仅在iOS端的Firefox和Safari中出现这个情况，换成Google字体Montserrat就没任何异常。

测试验证结果 #

• TD用Calibri字体，链接正常可点击
• a标签直接用Calibri字体，链接正常可点击
• TD用Gotham字体，链接失效
• a标签直接用Gotham字体，链接失效

问题根源分析 #

虽然@font-face配置能正常加载字体，但iOS的WebKit内核（Safari）和Firefox在渲染自定义字体时，可能因为Gotham字体文件本身的字形边界盒异常，导致链接的可点击区域被字体的不可见渲染层覆盖，或是点击区域被压缩偏移。这类问题多见于未做标准化处理的商用字体文件。

可行解决办法 #

1. 修复字体文件的字形边界

用FontForge、Glyphs这类字体编辑工具打开Gotham的字体文件，检查每个字符的字形边界盒，确保边界盒和可视字形完全匹配，没有额外的空白或异常扩展。修改后重新替换项目里的字体文件即可。

2. 给链接强制添加可点击优先级

不想修改字体的话，直接给<a>标签加样式提升点击优先级：

a {
  position: relative;
  z-index: 1;
  /* 可选：加透明边框确保点击区域完整 */
  border: 1px solid transparent;
}

行内样式写法：

<a href="test" style="font-family: Gotham, sans-serif; position: relative; z-index: 1;">Test</a>

3. 更换字体引入方式

如果前两种方法无效，试试把Gotham字体转换成更兼容的格式，或者使用有授权的CDN托管版本，避免本地引入可能存在的格式兼容问题。

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