chrome扩展阴影DOM导入boostrap字体 [英] chrome extension shadow DOM import boostrap fonts
问题描述
所以我想在从Chrome扩展程序内容脚本添加的shadowroot中显示bootstrap 3图标.到目前为止，它不起作用，有帮助吗?
so I'd like to display bootstrap 3 icons in a shadowroot added from a chrome extension content script. So far its not working, help?
manifest.js确实在web_accessible_resources中包含了woff文件
manifest.js does include the woff file in web_accessible_resources
阴影根的样式标签为:
@import url(chrome-extension://__MSG_@@extension_id__/fonts/glyphicons-halflings-regular.woff2);
我想念什么?
推荐答案
要导入字体，请勿使用用于导入CSS样式表的 @import url .
To import a font, you should not use @import url which is used to import a CSS stylesheet.
相反，您应该使用 @ font-脸 指令.
Instead, you should use the @font-face directive.
此外，此指令应放置在HTML页面的< head> 元素中，而不是放在Shadow DOM内.
Also, this directive should be placed in the <head> element of the HTML page, not inside the Shadow DOM.
host.attachShadow( { mode: 'open' } )
.innerHTML = `
<style>.icon { font-family: Icons; color: green ; font-size:30pt }</style>
<span class="icon"></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>您可以阅读此SO答案以了解更多详细信息.
You can read this SO answer for further details.
这篇关于chrome扩展阴影DOM导入boostrap字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
