自定义字体在主流浏览器无法正常显示的问题求助

自定义字体兼容问题修复方案 #

1. 修正@font-family核心定义错误 #

所有@font-face中的font-family字段仅需指定字体名称，不能附带sans-serif（fallback字体应在使用时声明）：

/* 错误写法 */
font-family: "Sharp", sans-serif;

/* 正确写法 */
font-family: "Sharp";

同理，Humane的@font-face定义也需移除末尾的, sans-serif。

2. 修复Humane字体格式声明错误 #

在Humane Regular的@font-face中，你将.otf文件的格式错误标记为truetype，这会导致浏览器解析失败：

/* 错误行 */
url("../fonts/Humane-Regular.otf") format("truetype"),

/* 修正后 */
url("../fonts/Humane-Regular.ttf") format("truetype"),
url("../fonts/Humane-Regular.otf") format("opentype"),

注：若没有Humane-Regular.ttf文件，直接移除该行即可。

3. 统一字体权重声明 #

将Humane Regular的font-weight: normal改为数值400，与其他字体声明保持一致，确保浏览器精准匹配：

@font-face {
  font-family: "Humane";
  src: url("../fonts/Humane-Regular.woff2") format("woff2"),
       url("../fonts/Humane-Regular.woff") format("woff"),
       url("../fonts/Humane-Regular.ttf") format("truetype"),
       url("../fonts/Humane-Regular.otf") format("opentype"),
       url("../fonts/Humane-Regular.eot") format("embedded-opentype");
  font-style: normal;
  font-weight: 400; /* 替换原normal */
  text-rendering: optimizeLegibility;
}

4. 简化字体使用代码，移除冗余声明 #

你当前选择器中重复声明font-family且滥用!important，会导致优先级混乱，简化后代码如下：

:root {
  /*color palette*/
  --color-primario: #305ae2;
  --color-secundario-oscuro: #000111;
  --color-secundario-claro: #f7f7f7;

  /*fonts*/
  --fuente-titulos: "Humane", sans-serif;
  --fuente-cuerpo: "Sharp", sans-serif;
}

h1, h2, h3, h4, h5 {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  line-height: 1;
}

p, a, h6 {
  font-family: var(--fuente-cuerpo);
  font-weight: 300;
}

若需覆盖其他高优先级样式，再针对性添加!important。

5. 验证字体文件路径与完整性 #

• 检查../fonts/相对路径是否匹配实际文件位置：若CSS文件在/css/目录，字体在根目录/fonts/则路径正确；若CSS在根目录，需改为./fonts/或fonts/。
• 打开浏览器开发者工具「网络」面板，查看字体文件是否返回200状态码，404则说明路径错误。
• 若Sharp Grotesk仍不生效，确认文件名大小写（Linux服务器区分大小写）、文件是否损坏（本地安装验证）、是否存在商用字体版权限制。

6. Safari兼容优化 #

给所有@font-face添加font-display: swap，避免字体加载时出现空白，同时确保字体渲染优先级：

@font-face {
  font-family: "Humane";
  src: url("../fonts/Humane-Bold.woff2") format("woff2"),
       url("../fonts/Humane-Bold.woff") format("woff"),
       url("../fonts/Humane-Bold.ttf") format("truetype"),
       url("../fonts/Humane-Bold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  text-rendering: optimizeLegibility;
  font-display: swap; /* 添加该行 */
}

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