Chrome扩展字体很棒，无法在Shadow Root中显示

Question

我的chrome扩展程序使用阴影根将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的工作正常。

Answer 1

一切都是正确的。

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

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

并使用@import fontawesome.css预先添加样式;根