chrome extension shadow DOM import boostrap fonts

问题

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 does include the woff file in web_accessible_resources

shadow root has style tag with:

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

What am I missing?

回答1:

To import a font, you should not use @import url which is used to import a CSS stylesheet.

Instead, you should use the @font-face directive.

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">&#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>

You can read this SO answer for further details.

来源：https://stackoverflow.com/questions/47610912/chrome-extension-shadow-dom-import-boostrap-fonts

标签

google-chrome-extension

font-face

shadow-dom

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!