3 分•作者: -__-•23 天前
我正在开发一款基于 Webkit 的移动浏览器，其中包含无障碍功能，包括使用 OpenDyslexic 字体覆盖页面字体。我尝试了以下代码的各种组合：
```html
<p>const style = document.createElement('style');
style.textContent = `
@font-face {
font-family: 'OpenDyslexic';
src: url('data:font/opentype;base64,...') format('opentype');
}
* { font-family: 'OpenDyslexic', sans-serif !important; }
`;
document.head.appendChild(style);
```
这段代码在任何地方都有效。我从这个页面点击的每个链接，我能找到的每个 90 年代的网站，都有效。除了这里！
在 HN 上，`font-family` 的 CSS 属性生效（我可以在检查器中看到，元素显示 `font-family: OpenDyslexic !important`），但实际渲染的字体却回退到了 sans-serif。 `@font-face` 也在 DOM 中。 Base64 编码是有效的，这段代码在其他网站上也能正常运行。
我尝试了：使用 blob URL 替代 data URL，使用 MutationObserver 重新应用，针对特定元素（font, td, table），以及 setTimeout 延迟。还尝试了更多方法。但唯独在 HN 上无效。
HN 的标记或标头中是否存在某些特殊之处，导致 `@font-face` 默默地失败？ 有没有人遇到过这个问题，或者知道为什么会发生这种情况？ 内容安全策略 (CSP) 和跨域资源共享 (CORS) 似乎不是问题，因为 base64 编码已经在 DOM 中了。 我可能遗漏了什么？