2

Google Web フォントをすべての形式でダウンロードし、組み合わせた CSS を作成して、Google サーバーから読み込まずにどこでも使用できるようにしたいと考えています。

フォント ファイルをダウンロードする php スクリプトが既にあります。今必要なのは CSS だけです。

ご存じのとおり、Google Web フォント API は、ブラウザのユーザー エージェントに応じて特別な CSS を提供します。

それについていくつか質問があります。

  1. Google の Web フォントが OS デバイスのみの svg として 1 つのフォントしか提供しないというのは本当ですか? (偽のユーザー エージェントを使用して) いくつかのフォントをテストしているときにこれに気付きました。他の人にとっては、複数の@font-face宣言がありますが、font-weightとはfont-style異なります。Google が SVG を提供するのは、「イタリック、ボールド、ブック ...」ではなく、「通常の」バージョンのフォントのみであると想定するのは正しいでしょうか。
  2. 特にこの結合された SVG フォントに関して、それらを 1 つの CSS に結合する最良の方法は何ですか。
4

2 に答える 2

15

Google が特定のユーザー エージェントのフォントのみを提供するのは正しいことです。それらをすべて取得するのは難しいです。

さまざまなフォント形式を取得するための PHP スクリプトがあるとおっしゃっていたので、これら 2 つのオプションは必要ないかもしれませんが、とにかくリストします。

オプション1

この記事では、さまざまな形式をすべてダウンロードする方法について説明します。

http://ijotted.blogspot.com/2012/05/download-eot-ttf-woff-formats-of-font.html

つまり、ユーザー エージェント スプーフィングを使用して、さまざまな形式をすべて取得する必要があります。

オプション 2

別のオプションは、TTF バージョンを取得して (簡単なので)、http://www.fontsquirrel.com/tools/webfont-generatorにアクセスして、他のすべてのバージョンを変換/生成することです。

このオプションを使用することになった場合は、Joe Maller がすべての TTF フォント ファイルを一度に取得するための完全なダウンロード パッケージを作成したことを知っておくと便利です (少し古いかもしれませんが)。

CSS で提供する

すべての異なるバージョンを入手したら、CSS に次のような構文を使用します。これは、FontSpring の Bulletproof Font-Face Syntaxからのものです。

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
     url('myfont-webfont.woff') format('woff'), 
     url('myfont-webfont.ttf')  format('truetype'),
     url('myfont-webfont.svg#svgFontName') format('svg');
}

もちろん、その最後の行は、SVG フォント ファイルがあるかどうかによって異なります。それは私たちに...

SVG

その最初のリンクは次のように主張しています。

Google がバージョン 4.2 以下を実行している iOS デバイスで SVG フォント形式を提供しているのは事実ですが、SVG が空であるか破損していることを確認できます。したがって、Google が iOS バージョン 4.2 以下を実行するデバイスをサポートしなくなったことは事実です。つまり、SVG フォント形式はもうありません。

これを他の場所で確認することはできませんでしたが、多くのユーザーが SVG の問題、フォントが読み込まれないことについて不満を漏らしているのを見てきました...オプションとして SVG を無視し、EOT/ の提供に集中する傾向があります。 WOFF/TTF. それがあなたの基地をカバーする最も堅実な方法のようです.

更新: fontsquirrel.com は SVG バージョンを生成できるようです。そのため、Google はダウンロード オプションとして SVG を提供していませんが、必要に応じて SVG を生成できます。

于 2013-03-30T16:06:47.333 に答える
3

base64エンコーディングを使用できますが、通常のファイルよりも約30％大きくなります（このURLが何かを書くたびに解析されるかどうかはわかりませんので、使用する前に確認してください）。または、一度ダウンロードしてローカルブラウザのメモリに保存し、新しいバージョンをダウンロードせずに使用することもできます（ただし、これらのファイルを少なくとも1回はダウンロードする必要があります）。

IEでは私はあなたを助けることができません。ただし、新しい@ font-faceルールを作成するときは、font-weightを指定できます。

/** #1 **/
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Extrabold'),
         local('OpenSans-Extrabold'),
         url(http://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-hnhCUOGz7vYGh680lGh-uXM.woff)
             format('woff');
}
/** #2 **/
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 300;
    src: local('Open Sans Light Italic'),
         local('OpenSansLight-Italic'),
         url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxh_xHqYgAV9Bl_ZQbYUxnQU.woff)
             format('woff');
}


.a {
    font-family: 'Open Sans';
    font-weight: 300; /** #2 used for <= 500 cos font-weights are 300 and 600 **/
}

.b {
    font-family: 'Open Sans';
    font-weight: 800; /** #1 used for >= 600 **/
}

それがあなたを助けることを願っています。

于 2013-03-19T14:03:45.223 に答える