アクセス元のブラウザー/デバイスに応じて、 Google がTTF、EOT、WOFF、またはSVGフォント ファイルを自動的に提供することを知りました。
現在、サーバー自体からフォント ファイルをホストして提供することを計画しています。そのためには、最初に Web フォントのすべてのファイル形式をダウンロードする必要があります。
使用したい Web フォントの 4 つのファイル形式をどこで、どのようにダウンロードできますか?
PS: Chrome、IE9、Safari (dev - iPhone UA) などのさまざまなブラウザーを使用して、WOFF、EOT、および TTF 形式を取得できました。ただし、SVG 形式ではうまくいきません。もっと簡単な方法があれば最高です。
編集: ああ、ちなみに、fontsquirrelからさまざまな形式をダウンロードできることは知っていますが、ここでは公式リポジトリからのダウンロードについて話しています。
======= 2016 年 5 月 31 日更新 =======
次のような Google Fonts CSS インポート URL からダウンロード リンクを取得する小さな PHP スクリプトを作成しました。
このツールは、http: //nikoskip.me/gfonts.phpで使用できます。
たとえば、上記のインポート URL を使用すると、次のようになります。
Chrome の新しいリリースごとにこの回答を更新することにうんざりしています。ユーザー エージェント文字列を偽装する方法が常に変更されるため、代わりにこのスクリプトを使用してください。
======= 古い解決策 =======
Chrome の DevTools を使用すると、ユーザー エージェントをオーバーライドできます。
方法：
Spoof user agent、EOT 形式の場合は IE9、TTF の場合は Android 4、SVG の場合はこの UA 文字列を選択します: Mozilla/4.0 (iPad; CPU OS 4_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/4.1 Mobile/9A405 Safari/7534.48.3(匿名に感謝)http://code.google.com/p/googlefontdirectory/で Google Webfonts ディレクトリのクローンを作成できます。
http://code.google.com/p/googlefontdirectory/source/browse/#font_nameで単一のフォント ファイルを取得することもできます。
各フォントのダウンロードに必要なユーザーエージェントは以下の通りです。ソース。
module.exports = {
USER_AGENTS: {
eot: 'Mozilla/5.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)',
woff: 'Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0',
woff2: 'Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML like Gecko) Chrome/38.0.2125.104 Safari/537.36', // complete woff2 file for one variant
svg: 'Mozilla/4.0 (iPad; CPU OS 4_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/4.1 Mobile/9A405 Safari/7534.48.3',
ttf: 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/534.54.16 (KHTML, like Gecko) Version/5.1.4 Safari/534.54.16'
},
GOOGLE_FONTS_API_KEY: 'AIzaSyDY-C-Lt9uyPP5fSTjMCR4bB944SlI4spw',
CACHE_DIR: __dirname + "/cachedFonts/",
}
devtool を使用してこれらのユーザー エージェントを追加します。
これで、ユーザー エージェントにアクセスhttps://fonts.googleapis.com/css?family=Open+Sansしてスプーフィングし、 にある URL にアクセスしてフォントをダウンロードできます@font-face。
または、google- webfonts -helperがすべてを行います。
私が画像を取得した開発者からの
すばらしいブログ投稿がここにあります。
可能であれば、常に共通の CDN を使用してください。フォントをダウンロードする必要さえない可能性が高くなります (ブラウザーのキャッシュ)。
Google が間違ったフォントをユーザーに送信することを心配している場合は、ユーザー エージェントを偽装している可能性が最も高いため、別のオプションを使用しても、Google ホスティングを使用する利点が得られます。
@font-face上記の手順を使用して Google フォントの URL を見つけ、これを<head>;に挿入します。
<style>
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(google-font-url-here/opensans.eot);
src: local('Open Sans'), local('OpenSans'),
url(google-font-url-here/opensans.eot?#iefix) format('embedded-opentype'),
url(google-font-url-here/opensans.woff2) format('woff2'),
url(google-font-url-here/opensans.woff) format('woff'),
url(google-font-url-here/opensans.ttf) format('truetype'),
url(google-font-url-here/opensans.svg#OpenSans) format('svg');
}
</style>
古い答え:
https://code.google.com/archive/p/googlefontdirectory/
のオンライン クローンを作成しました:)
いくつかの異なるユーザー エージェントに提供されるフォントを自動的にダウンロードする PowerShell スクリプトを作成しました。基本フォントの場合、4 つの形式 (woff、ttf、svg、eot) すべてを取得します。Google は、太字と斜体の重みの SVG および EOT ファイルを提供していないようです。
$agents = "Mozilla/5.0 (X11; Linux i686; rv:6.0) Gecko/20100101 Firefox/6.0",`
"Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1",`
"Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)",`
"Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7",`
"Mozilla/5.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; GTB7.4; InfoPath.2; SV1; .NET CLR 3.3.69573; WOW64; en-US)"
foreach($arg in $args) {
$arg;
foreach($agent in $agents) {
$agent;
$webclient = New-Object System.Net.WebClient
[void]$webclient.Headers.Add("user-agent", $agent)
$url = "http://fonts.googleapis.com/css?family=$arg"
$css = $webclient.DownloadString($url)
$css
$fonts = $css |
Select-String -AllMatches "http://[A-Za-z0-9/._?&=%-]+" |
Select-Object -ExpandProperty Matches |
Select-Object -ExpandProperty Value
foreach($font in $fonts) {
$font
$fontfile = [System.Io.Path]::GetFileName((new-object System.Uri $font).LocalPath)
[void]$webclient.DownloadFile($font, "$pwd\$fontfile")
}
}
}
.ps1 ファイルに入ると、ダウンロードするフォントを引数として呼び出すことができます。
PS> .\DownloadFonts.ps1 "Open+Sans:400,700,400italic,700italic"
このスクリプトは、Google のサーバーから取得した CSS を出力して、どのファイルがどれであるかを判断できるようにします (たとえば、私の場合、SVG フォントは "font" というファイルとして取得されました)。
これは、RichardN と ldeck がブログ投稿Locally Caching Google Web Fontsに投稿した bash スクリプトに基づいています。
参考までに、ldeck の bash スクリプトを次に示します。
#!/bin/sh
for family in $*; do
for url in $( {
for agent in \
'Mozilla/5.0 (X11; Linux i686; rv:6.0) Gecko/20100101 Firefox/6.0' \
'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1' \
'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)' ;
do
curl -A "$agent" -s "http://fonts.googleapis.com/css?family=$family" | \
grep -oE 'http://[A-Za-z0-9/._-]+'; \
done } | sort -u ) ;
do
extn=${url##*.} ;
file=$(echo "$family"| tr +[:upper:] _[:lower:]);
echo $url $file.$extn;
curl -s "$url" -o "$file.$extn";
done
done
詳細な参照: HTML5 AppCache の使用。