当前位置：文江博客话题详情

如何在内容脚本中的 Chrome 扩展上使用 @font-face

发布于 2024-10-09 20:59:41 字数 90 浏览 0 评论 0原文

由于我无法在 CSS 文件上使用 chrome.extension.getURL()，如何将 @font-face 与本地字体文件一起使用？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

北笙凉宸 2024-10-16 20:59:41

以下是如何在 css 中获取本地路径：

body {
  background-image:url('chrome-extension://__MSG_@@extension_id__/background.png');
}

更多信息此处。

Here is how to get local path in css:

body {
  background-image:url('chrome-extension://__MSG_@@extension_id__/background.png');
}

More about it here.

回复收藏 0 原文

牵你手 2024-10-16 20:59:41

这个解决方案最终对我有用：

它将样式节点注入到内容脚本的文档中。

对于 Font Awesome，您只需要 Chrome 的 .woff src。

将 @font-face 样式表规则添加到 chrome 扩展

我的代码：

var fa = document.createElement('style');
    fa.type = 'text/css';
    fa.textContent = '@font-face { font-family: FontAwesome; src: url("'
        + chrome.extension.getURL('lib/fa/fonts/fontawesome-webfont.woff?v=4.0.3')
        + '"); }';
document.head.appendChild(fa);

在你的清单中：

"css":[
    "lib/fa/css/font-awesome.min.css",
    ...
    ]

"web_accessible_resources":[
    "lib/fa/fonts/*",
    ...
    ]

This solution finally worked for me:

It injects a style node into the document of the content script.

And for Font Awesome, you only need the .woff src for Chrome.

Adding @font-face stylesheet rules to chrome extension

My code:

var fa = document.createElement('style');
    fa.type = 'text/css';
    fa.textContent = '@font-face { font-family: FontAwesome; src: url("'
        + chrome.extension.getURL('lib/fa/fonts/fontawesome-webfont.woff?v=4.0.3')
        + '"); }';
document.head.appendChild(fa);

In your manifest:

"css":[
    "lib/fa/css/font-awesome.min.css",
    ...
    ]

"web_accessible_resources":[
    "lib/fa/fonts/*",
    ...
    ]

回复收藏 0 原文

方觉久 2024-10-16 20:59:41

老问题，但我认为这是最好的解决方案：

Firefox 扩展自定义字体

它同样适用于chrome 扩展，因为您不是指向字体文件，而是在 CSS 中包含该字体的 base64 编码版本。

回复收藏 0 原文

权谋诡计 2024-10-16 20:59:41

只需使用相对 URL。它更简单、更干净，而且是正确的做法™：

@font-face {
    font-family: 'FontAwesome';
    src: url('../font/fontawesome-webfont.eot');
}

我知道这个问题很老了，但它是 Google 上的最高结果，而且公认的答案效率低下。

编辑：其他人似乎对此得到了不同的结果。我应该提到的是，在内容脚本中使用时它可能不起作用。我已经在弹出脚本中对此进行了测试，效果很好。

Just use a relative URL. It's simpler, cleaner, and is The Right Thing To Do™:

@font-face {
    font-family: 'FontAwesome';
    src: url('../font/fontawesome-webfont.eot');
}

I know this question is old but it's a top result on Google and the accepted answer is inefficient.

EDIT: It seems that others are getting mixed results for this. I should mention that it probably doesn't work when used in Content Scripts. I've tested this in Popup Scripts and it works fine.

回复收藏 0 原文

~没有更多了~