gpt4 book ai didi

google-chrome-extension - chrome扩展shadow DOM导入引导字体

转载 作者:行者123 更新时间:2023-12-02 03:43:31 25 4
gpt4 key购买 nike

所以我想在从 chrome 扩展内容脚本添加的 Shadowroot 中显示 Bootstrap 3 图标。到目前为止还不起作用,有帮助吗?

manifest.js 确实在 web_accessible_resources 中包含了 woff 文件

shadow root 的样式标签为:

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

我错过了什么?

最佳答案

要导入字体,不应使用 @import url它用于导入 CSS 样式表。

相反,您应该使用 @font-face 指令。

此外,该指令应放置在 <head> 中HTML 页面的元素,不在 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了解更多详情。

关于google-chrome-extension - chrome扩展shadow DOM导入引导字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47610912/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com