41

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

4

3 に答える 3

61

フォントを選択します。例として、「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/sntultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff )。

このファイルをダウンロードします。

プロパティのlocal値のパラメータをファイル名として使用する( Stint Ultra Expanded )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ます。次のようになります。

@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 でこのフォントを使用したい場合はurl、css で調整する必要があります。

@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-faceCSS には好きなだけルールを追加できます。

注意:プロパティ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.
于 2013-10-08T09:12:20.503 に答える
7

ユーザーに Google Web Fonts へのアクセス許可を求めることは、それらを埋め込むよりもはるかに手間がかかりません (最終的なオフライン シナリオではこれが完全に理にかなっている場合でも)。

マニフェスト.json

"permissions": [
    "http://fonts.googleapis.com/",
    "https://fonts.googleapis.com/"
],
于 2014-02-22T00:05:40.937 に答える