为什么我的chrome扩展下载我的自定义字体上的每个元素渲染?

Question

我有一个自定义字体的chrome扩展，它工作正常，我可以看到字体是在devtools网络选项卡中下载的。

但是每次我的扩展渲染我的react组件时，我的自定义字体一次又一次地被下载，我所有的文本都闪烁一次来渲染。

我试图在src属性中添加local函数，但没有任何变化。我需要在其他地方添加一个属性吗?

下面是我的代码:

manifest.json

{
...
"content_scripts": [
{
"matches": ["*://*.instagram.com/*"],
"js": ["content_script.js"],
"run_at": "document_start",
"web_accessible_resources": [ "assets/ClashGrotesk-Variable.ttf" ]
}
],
"web_accessible_resources": [
"assets/inject.js",
"assets/ClashGrotesk-Variable.ttf",
],
...
}

app.tsx

我用styled-components

const GlobalStyle = createGlobalStyle`
@font-face {
font-family: 'ClashGrotesk-Variable';
src: local('ClashGrotesk-Variable'), url('chrome-extension://__MSG_@@extension_id__/assets/ClashGrotesk-Variable.ttf') format('truetype');
font-weight: 200 700;
font-display: swap;
font-style: normal;
}
html body {
font-family: 'ClashGrotesk-Variable';
}
`

Answer 1

最后我决定将我的字体编码为base64，感谢这个答案，它不再在每次渲染上加载我的字体了。

转换和渲染网页字体到base64 -保持原来的样子