web-dev-qa-db-ja.com

Google Chrome拡張子を持つフォントのパッケージ化

Chrome拡張子の付いた標準フォント以外のものを使用したい。GoogleWeb Fontsを使用する可能性に興奮しましたが、Webフォントの転送にペナルティが発生する可能性があるようです拡張機能がそれを使用するときはいつでも、ネットワーク経由で、拡張機能のパフォーマンスに影響を与えます。Chromeでサポートされているすべてのプラットフォーム（Windows/Macなど）で機能する拡張機能でフォントをパッケージ化するオプションはありますか？前もって感謝します

google-chrome-extensionwebfonts
36
user2852001

フォントを選択します。例として "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');
}

url値の最初のパラメータをsrcプロパティから取得（http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbkb .woff）。

このファイルをダウンロードしてください。

localパラメータのsrcプロパティの値をファイル名として使用（Stint Ultra Expanded）

簡単な方法は、wgetを使用してダウンロードすることです。

wget -O "Stint Ultra Expanded.woff" http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff

次に、cssファイルを作成し、前に見たコンテンツを追加します。ただし、srcプロパティの値を変更する必要があります。すべてのlocalsを削除し、urlを調整します。これは次のようになります。

@font-face {
  font-family: 'Stint Ultra Expanded';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Stint Ultra Expanded.woff') format('woff');
}

次に、CSSファイルを拡張子に追加し、フォントを使用します。

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>

Content_scriptでこのフォントを使用する場合は、CSSでurlを調整する必要があります。

@font-face {
  font-family: 'Stint Ultra Expanded';
  font-style: normal;
  font-weight: 400;
  src: url('chrome-extension://__MSG_@@extension_id__/fonts/Stint Ultra Expanded.woff') format('woff');
}

@font-face必要に応じて、CSSのルール。

注意：localプロパティのsrc値は、それを格納するために使用する必要がある名前を示します。この名前を使用することをお勧めします。

2番目の通知：予想されるgoogleのように使用している場合、ブラウザーはこのフォントがすでにローカルで使用可能かどうかを確認します。そうでない場合は、ダウンロードして保存します。したがって、次回は以前に保存されたフォントを使用します。

Chrome 37（多分以前））の時点で、拡張機能のマニフェストでフォントをWebアクセス可能なリソースとして言及する必要があります。

"web_accessible_resources": [
  "font/*.woff2"
]

そうしないと、次のようなエラーが表示されます。

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.
52
Walery Strauch

これはかなり古いですが、まだ問題がある場合は、JavaScriptでフォントファイルをロードすることができます。シャドウdom内でフォントフェース宣言を機能させるのに苦労しました。すべてのスタイルがロードされますが、chromeはfont-face宣言を完全に無視します。

let font = new FontFace("yourFontName", "url('path/to/font/file.woff')");
document.fonts.add(font);

これは私にとっては美しく機能します。 font-faceを使用することをお勧めしますが、私の使用例はChromeのバグだと確信しています。 これはその仕様です

6
qwerty

Google Web Fontsにアクセスするためのアクセス許可をユーザーに要求することは、それらを埋め込むよりもはるかに簡単です（これが最終的なオフラインシナリオで完全に意味がある場合でも）。

manifest.json

"permissions": [
    "http://fonts.googleapis.com/",
    "https://fonts.googleapis.com/"
],
4
Martin Zeitler