铬扩展阴影DOM导入boostrap字体

2017-12-02 257 views 1 likes

所以我想显示引导程序3图标在从铬扩展内容脚本添加的shadowroot。到目前为止它不工作，帮助？铬扩展阴影DOM导入boostrap字体

manifest.js不包括在web_accessible_resources的WOFF文件

影子根有风格标签具有：

@import url(chrome-extension://[email protected]@extension_id__/fonts/glyphicons-halflings-regular.woff2);

我缺少什么？

来源

2017-12-02 Skaplun

回答

要导入字体，不应使用用于导入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。

来源

2017-12-02 19:18:15 Supersharp

铬扩展阴影DOM导入boostrap字体

回答

相关问题