Chrome Extension Font Awesome 不会在 Shadow Root 中显示答案

【问题标题】：Chrome Extension Font Awesome won't display in Shadow RootChrome Extension Font Awesome 不会在 Shadow Root 中显示
【发布时间】：2016-02-15 05:41:10
【问题描述】：

我的 chrome 扩展使用 shadow root 将 div 附加到页面，这样其他样式就不会影响我的 div。

但是因为我这样做，我的 Font Awesome 图标不显示。我已经尝试实施有关使用@font-face 的其他问题，但它仍然不起作用。

content =
    "<style>" +
      "@font-face {" +
        "font-family: 'FontAwesome';" +
        "src: url('" + chrome.extension.getURL('Alpha_Extension_Design/font-awesome-4.4.0/fonts/fontawesome-webfont.eot?v=4.4.0') + "');" +
        "src: url('" + chrome.extension.getURL('Alpha_Extension_Design/font-awesome-4.4.0/fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') + "') format('embedded-opentype'),"+
        "url('" + chrome.extension.getURL('Alpha_Extension_Design/font-awesome-4.4.0/fonts/fontawesome-webfont.woff2?v=4.4.0') + "') format('woff2')," +
        "url('" + chrome.extension.getURL('Alpha_Extension_Design/font-awesome-4.4.0/fonts/fontawesome-webfont.woff?v=4.4.0') + "') format('woff')," +
        "url('" + chrome.extension.getURL('Alpha_Extension_Design/font-awesome-4.4.0/fonts/fontawesome-webfont.ttf?v=4.4.0') + "') format('truetype')," +
        "url('" + chrome.extension.getURL('Alpha_Extension_Design/font-awesome-4.4.0/fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') +"') format('svg');" +
        "font-weight: normal;" +
        "font-style: normal;" +
      "}" +
    "</style>" + content;

shadow.innerHTML = content;

我在这里做错了什么？如果我将样式表附加到我所在页面的标题并且我没有使用影子根，Font Awesome 就可以正常工作。

【问题讨论】：

您是否列出了"web_accessible_resources" 中的字体？如果是，那么可能是 Chrome 中 shadowDOM 的错误/限制，在这种情况下使用 crbug.com 开票
我已经在 web_accessible_resources 中列出了字体。它看起来不像一个错误。其他扩展，如 Mini Mammoth(chrome.google.com/webstore/detail/mini-mammoth/…) 有一个带有 @font-face 的影子根。但我不确定他们是怎么做到的。
正如您在该扩展的 cSS 文件中看到的那样，它们对字体使用 base64 编码。也试试吧，我猜。
我不确定如何将 Font Awesome 转换为 base64 并使用它。虽然我确实找到了这个：github.com/FortAwesome/Font-Awesome/issues/294。我按照 Xero 所说的将 ttf 上传到 font-squirrel。按照他的指示，我收到了一个带有 base64 字体真棒的文件夹，但我不确定如何处理它。
你不知道是什么意思？该示例在该 github 问题和该扩展的 CSS 文件中给出。

标签： css google-chrome-extension shadow-dom

【解决方案1】：

一切都是正确的。

您需要将带有@font-face 的样式添加到父文档

$(document.head).append( $('<style/>', {html: function() { return '@font-face ...'; }}) )

并在样式前加上@import fontawesome.css；去根

【讨论】：

谢谢，这非常有用！