铬扩展阴影DOM导入boostrap字体

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

影子根有风格标签具有：

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

我缺少什么？

回答：

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

以上是 铬扩展阴影DOM导入boostrap字体 的全部内容， 来源链接： utcz.com/qa/257621.html

回到顶部