コンテンツスクリプトのChrome拡張機能で@ font-faceを使用する方法

Question

CSSファイルでchrome.extension.getURL()を使用できないため、@ font-faceをローカルフォントファイルで使用するにはどうすればよいですか？それhereについて

body { 
    background-image:url('chrome-extension://__MSG_@@extension_id__/background.png'); 
} 

詳細：ここ

Answer 1

は、CSSのローカルパスを取得する方法です。

Answer 2

相対URLを使用してください。それは単純な、きれいだし、™を行うには正しいことである：

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('../font/fontawesome-webfont.eot'); 
} 

私はこの質問は古いです知っているが、それはGoogleで上位の結果だと受け入れられた答えは非効率的です。

編集：他の人がこのために混乱しているようです。私はそれがおそらくコンテンツスクリプトで使用されていないと言及する必要があります。私はポップアップスクリプトでこれをテストして、うまくいきます。

Answer 3

このソリューションは、最終的には私の仕事：

それはコンテンツスクリプトのドキュメントにスタイルノードを挿入します。

フォントAwesomeでは、Chrome用の.woff srcのみが必要です。

Adding @font-face stylesheet rules to chrome extension

マイコード：

var fa = document.createElement('style'); 
    fa.type = 'text/css'; 
    fa.textContent = '@font-face { font-family: FontAwesome; src: url("' 
     + chrome.extension.getURL('lib/fa/fonts/fontawesome-webfont.woff?v=4.0.3') 
     + '"); }'; 
document.head.appendChild(fa); 

マニフェストで

：

"css":[ 
    "lib/fa/css/font-awesome.min.css", 
    ... 
    ] 

"web_accessible_resources":[ 
    "lib/fa/fonts/*", 
    ... 
    ] 

Answer 4

古い質問が、私が思うに、これが最善の解決策である：

Firefox extension custom fonts

これは、フォントファイルを指すのではなく、CSSのフォントのbase64でエンコードされたバージョンを含むため、クロムの拡張子にも同じように適用されます。