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>元素中，而不是放在Shadow 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>

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

chrome扩展shadow DOM导入boostrap字体

1 个答案: