问 HN：为什么我不能在 HN 上应用自定义字体？
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 中了。 我可能遗漏了什么？
查看原文
I'm building a mobile browser (webkit base) with accessibility features, including an option to override page fonts with OpenDyslexic. I have tried every permutation of:<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);<p>it works everywhere. every link I click from this page, every website from the 90s I can find. everywhere except here!<p>On HN, the font-family CSS applies (I can see it in the inspector, elements show font-family: OpenDyslexic !important), but the actual rendered font falls back to sans-serif. The @font-face is in the DOM. The base64 is valid, the code works on other sites.<p>Tried: blob URLs instead of data URLs, MutationObserver to reapply, targeting specific elements (font, td, table), setTimeout delays. so much more. Nothing works on HN specifically.<p>Is there something about HN's markup or headers that would cause @font-face to fail silently? Has anyone dealt with this issue or know why it could be happening? content security policy & cors don’t seem at fault bc the base64 is in the dom. What might I be missing?