自定义字体加载异常：Ktegaki字体无法显示求助

可能的原因及解决步骤 #

1. 字体文件兼容性或损坏问题 #

• 先本地打开KTEGAKI.ttf文件，确认文件能正常显示字符，排除文件损坏情况。
• 将TTF格式转换为WOFF/WOFF2格式（现代浏览器对这两种格式支持更好，加载效率更高），替换@font-face中的src路径。转换后示例：

@font-face {
  font-family: 'ktegaki';
  src: url('ktegaki.woff2') format('woff2'),
       url('ktegaki.woff') format('woff'),
       url('https://dl.dropboxusercontent.com/s/0v89ncr2notdcgc/KTEGAKI.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

2. 完善@font-face声明 #

你的@font-face缺少必要属性，可能导致浏览器无法匹配字体：

• 补充font-weight和font-style（默认值为normal，但显式声明更稳妥）；
• 添加format明确字体格式；
• 可选添加font-display: swap避免字体加载时出现空白（FOIT）。
  修改后的Ktegaki字体声明：

@font-face {
  font-family: 'ktegaki';
  src: url('https://dl.dropboxusercontent.com/s/0v89ncr2notdcgc/KTEGAKI.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

3. 排查CSS继承与优先级问题 #

#name1中的文本可能被内部元素的样式覆盖，或未正确继承字体：

• 给#name1内的普通文本单独指定字体，测试是否生效：

#name1 p {
  font-family: 'ktegaki', sans-serif; /* 添加sans-serif作为 fallback，方便直观判断是否生效 */
}

• 检查是否有其他全局CSS规则（比如body、p的font-family）覆盖了#name1的字体设置。

4. 解决Dropbox托管的MIME类型问题 #

Dropbox默认链接可能返回错误的MIME类型（如application/octet-stream），导致浏览器拒绝加载字体：

• 将链接域名从dl.dropbox.com替换为dl.dropboxusercontent.com，该域名会返回正确的字体MIME类型（font/ttf）。

5. 清除浏览器缓存 #

之前的错误加载记录可能被缓存，强制浏览器重新加载字体：

• 在字体URL后添加版本参数，比如：

src: url('https://dl.dropboxusercontent.com/s/0v89ncr2notdcgc/KTEGAKI.ttf?v=1') format('truetype');

• 手动清空浏览器缓存（快捷键：Ctrl+Shift+Delete）。

关于此前Google Fonts首位字体失效的关联问题 #

这类问题通常也和字体加载顺序、缓存、或声明不完整有关，可套用上述步骤排查：

• 确保Google Fonts的链接在自定义字体声明之前加载；
• 检查是否有CSS规则覆盖了首位字体的应用；
• 清除浏览器缓存后重新测试。

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