Mac Safari自定义字体无法显示问题求助（表单字段异常）

你遇到的问题核心出在@font-face的错误定义上，再加上Safari对字体加载的特殊处理，咱们一步步来修复：

1. 修正@font-face的src属性写法 #

你当前的代码里每个@font-face都重复写了src属性，后面的会直接覆盖前面的，更关键的是所有字体都错误指向了gotham-black.otf——这就导致不管你调用哪个Gotham字体，实际加载的都是黑色粗体版本，Safari在处理这种错误的字体定义时很容易出现异常。

正确的写法应该用逗号分隔多个字体源，让浏览器自动选择支持的格式，同时每个@font-face要对应正确的字体文件：

@font-face {
  font-family: 'Gotham HTF Light';
  src: url('gothamlight.ttf') format('truetype'),
       url('gothamlight.otf') format('opentype'); /* 替换为Light版本的OTF，不要用black！ */
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham HTF Book';
  src: url('gothambook.ttf') format('truetype'),
       url('gothambook.otf') format('opentype'); /* 对应Book版本的OTF */
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham HTF Medium';
  src: url('gothammedium.ttf') format('truetype'),
       url('gothammedium.otf') format('opentype'); /* 对应Medium版本的OTF */
  font-weight: 500;
  font-style: normal;
}

另外加上明确的font-weight，能让浏览器更准确地匹配字体权重，避免样式混乱。

2. 优化全局字体与表单元素样式 #

Safari对表单元素（input/select/textarea等）的字体继承有时候会比较“顽固”，可以做以下调整：

html, body {
  text-rendering: optimizeLegibility;
  font-family: 'Gotham HTF Light', sans-serif; /* 加上系统无衬线字体作为降级方案 */
  font-weight: 300;
}

body {
  font-weight: normal;
}

/* 全局字体重置更稳妥的写法 */
* {
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
}

/* 明确指定表单元素字体，避免Safari忽略继承 */
input, select, textarea, button, label {
  font-family: 'Gotham HTF Light', sans-serif;
  font-weight: 300;
}

添加系统字体作为降级，即使自定义字体加载失败，页面也能保持正常显示。

3. 调试检查步骤 #

• 打开Safari开发者工具（偏好设置-高级里勾选“显示开发菜单”），切换到「网络」标签，刷新页面查看字体文件是否成功加载（有没有404错误）。
• 确认字体文件路径正确，确保gothamlight.ttf等文件和CSS文件的相对路径无误。
• 检查字体文件本身是否损坏，部分不兼容的TTF/OTF格式会导致Safari无法识别。

按照以上步骤调整后，Mac Safari里的自定义字体应该就能正常显示了。

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