Chrome拡張機能で標準フォント以外のものを使用したいと思っています。私はGoogle Webフォントを使用する可能性に興奮していましたが、拡張機能を使用するたびにWebフォントをネットワーク経由で転送すると、拡張機能のパフォーマンスに影響を及ぼす点で不利益を被る可能性があります。 Chromeでサポートされているすべてのプラットフォーム（Windows/Mac /その他）で動作する拡張機能付きフォントをパッケージ化するオプションはありますか？事前に感謝Google Chrome拡張機能を使ってフォントをパッケージする
あなたのフォントを選択してください。例として、"Stint Ultra Expanded"とします。例では、自分のページに追加する方法があります：
<link href='http://fonts.googleapis.com/css?family=Stint+Ultra+Expanded' rel='stylesheet' type='text/css'>
はhrefを取り、ブラウザで開きます。あなたはこのようになめらかに表示されます：
@font-face {
font-family: 'Stint Ultra Expanded';
font-style: normal;
font-weight: 400;
src: local('Stint Ultra Expanded'), local('StintUltraExpanded-Regular'), url(http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff) format('woff');
}
はsrcプロパティ（http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQwからurl値の最初のパラメータを取ります。 woff）。
このファイルをダウンロードします。
使用パラメータファイル名（を拡大スティントウルトラ）
簡単な方法は、それをダウンロードすることであるとしてlocal値srcの財産のは、wgetのを使用している：
wget -O "Stint Ultra Expanded.woff" http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff
今すぐCSSファイルを作成し、コンテンツを追加することあなたは以前に見たことがあります。 しかし、srcプロパティの値を変更する必要があります。すべてlocalを削除し、urlを調整します。これは、このようななめらかする必要があります：あなたがしたい場合
popup.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href='css/fonts.css' rel='stylesheet' type='text/css'>
</head>
<body>
<span style="font-family: 'Stint Ultra Expanded';">Hello Font</span>
</body>
</html>
：
@font-face {
font-family: 'Stint Ultra Expanded';
font-style: normal;
font-weight: 400;
src: url('../fonts/Stint Ultra Expanded.woff') format('woff');
}
今すぐ内線にCSSファイルを追加し、フォントを使用しますあなたのCSSにurlを調整する必要があるcontent_scriptでこのフォントを使用してください：
@font-face {
font-family: 'Stint Ultra Expanded';
font-style: normal;
font-weight: 400;
src: url('chrome-extension://[email protected]@extension_id__/fonts/Stint Ultra Expanded.woff') format('woff');
}
あなたのCSSに好きなだけ多くの@font-faceルールを追加できます。
注意：srcの値はlocalで、値は保存するために使用する必要があります。この名前を使用することをお勧めします。
2番目の通知：Googleのように使用している場合、ブラウザはこのフォントが既にローカルにあるかどうかを確認します。そうでない場合は、ダウンロードして保存します。次回は以前に保存されたフォントを使用します。
クロム37（多分それ以前）の時点で、あなたは拡張機能のマニフェストでウェブアクセス可能なリソースとしてフォントを言及する必要があります。
Denying load of chrome-extension://{ID}/font/My Web Font.woff2.
Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
"web_accessible_resources": [
"font/*.woff2"
]
そうでない場合はあなたのようなエラーが表示されます
Google Webフォントにアクセスする権限をユーザに求めることは、たとえオフラインのシナリオで完璧な意味があるとしても、それらを埋め込むよりはるかに簡単です。
manifest.jsonを
"permissions": [
"http://fonts.googleapis.com/",
"https://fonts.googleapis.com/"
],
パッケージ化されたアプリケーションでは動作しませんが、拡張機能で動作します。 –
@WillScottパッケージ化されたアプリのソリューションを見つけましたか？ –
あなたはどのように拡張機能にCSSリンクを追加しますか？私はマニフェストでそれを試しましたが、そこでは動作しませんでした。 – Hannobo
これは、パッケージのアプリでは動作しません。 'web_accessible_resources'は、拡張機能、ホステッドアプリ、レガシーパッケージのアプリのみで使用できますが、パッケージ化されたアプリです。 –
私のChrome拡張機能のポップアップでこのメソッドが機能しないようです。 – offthat
'web_accessible_resources'は拡張機能にしか使えませんが、フォントのダウンロードと統合（答えの最初の部分で説明したように）は、パッケージ化されたアプリでうまくいきます。 – schellmax