chrome 扩展阴影 DOM 导入引导字体

Question

所以我想在从 chrome 扩展内容脚本添加的 shadowroot 中显示 bootstrap 3 个图标。到目前为止它不起作用，求助？

manifest.js 确实在 web_accessible_resources

中包含 woff 文件

shadow root 的样式标签为：

 @import url(chrome-extension://__MSG_@@extension_id__/fonts/glyphicons-halflings-regular.woff2);

我错过了什么？

Answer 1

要导入字体，您不应使用用于导入 CSS 样式表的 @import url。

相反，您应该使用 @font-face 指令。

此外，该指令应放置在 HTML 页面的 <head> 元素中，而不是阴影 DOM.

内

host.attachShadow( { mode: 'open' } )
    .innerHTML = `
    <style>.icon { font-family: Icons; color: green ; font-size:30pt }</style>
    <span class="icon">&#xe084</span>`

@font-face {
    font-family: "Icons" ;
    src: url("https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2") format("woff2")
}

<div id=host></div>

您可以阅读了解更多详情。

chrome 扩展阴影 DOM 导入引导字体

chrome extension shadow DOM import boostrap fonts

font-face

google-chrome-extension

shadow-dom