1. 首頁
  2. 問答
  3. 鉻擴展陰影DOM導入boostrap字體

鉻擴展陰影DOM導入boostrap字體

2017-12-02 256 views
1

所以我想顯示引導程序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

回答

1

要導入字體，不應使用用於導入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

相關問題

 相關問題