1

私は FontSquirrel で @font-face を生成し、これらの (後で微調整された) ルールを生成しました:

@font-face {
    font-family: 'CabinSketchRoBold';
    src: url('cabinsketchro-boldwebfont.eot');
}

@font-face {
    font-family: 'CabinSketchRoBold';
    src: url('cabinsketchro-boldwebfont.woff') format('woff'),
         local('?'), url('cabinsketchro-boldwebfont.ttf') format('truetype'),
         url('cabinsketchro-boldwebfont.svg#CabinSketchRoBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

スタイルは、次のように css ファイルに適用されます。

h1,h2,h3,h4,h5,h6 {font-weight:normal;font-family:'CabinSketchRoBold',Arial,sans-serif !important; }

Chrome では、InternetExplorer でも問題なく動作しますが、新しいバージョンの Firefox では、フォントが読み込まれません。FF 3.6 で読み込まれます... o_O

JavaScriptオプションを介してGoogleからロードされた別のフォントUbuntuがあり、変更後、見出しであっても問題なくロードされます

font-family:'CabinSketchRoBold','Ubuntu',Arial,sans-serif !important;

FF にローカル フォントを無視させる宣言の何が問題になっていますか?

編集: これは localhost だけでなく、ライブ サイトでも発生します。他の回答を見て試してみましたが、うまくいきませんでした。WOFF は base64 でエンコードされていても同じ結果でした。

解決済み: 別の宣言 (再び FontSquirrel が生成) にある .eot が損害を与えていたようです。他のものと一緒に移動すると解決しました。ありがとうボリス・ズバルスキー！

@font-face {
    font-family: 'CabinSketchRoBold';
    src: url('cabinsketchro-boldwebfont.eot?#') format('eot'),
         url('cabinsketchro-boldwebfont.woff') format('woff'),
         local('?'), url('cabinsketchro-boldwebfont.ttf') format('truetype'),
         url('cabinsketchro-boldwebfont.svg#CabinSketchRoBold') format('svg');
    font-weight: normal;
    font-style: normal;
}
4

3 に答える 3

2

あなたの問題は、「CabinSketchRoBold」フォントの 2 つの別々の面を実際に定義していることです。

最初のフェイスは通常の太さで、フォント データに .eot ファイルを使用します。

2 番目のフェイスは太字で、woff、truetype、svg のいずれか使用可能なものを使用します。

次に、通常の太さのテキストをスタイリングしています。したがって、最初の面が選択されます。この仕様については、 http://dev.w3.org/csswg/css3-fonts/#font-style-matchingを参照してください。

具体的には、その仕様の手順に従って、手順 4 で .eot という単一の面になります。しかし、ブラウザーはそのフォント形式では何もできないため、このフェイスにはグリフがないため、ステップ 5 でブラウザーは次の姓に進みます。「CabinSketchRoBold」ファミリーのもう一方の (太字) 面は、仕様により考慮されません。

したがって、font-weight: bold両方のルールにリストするか、どちらにもリストしないかのどちらかにする必要があります。その場合、.eot およびその他のオプションはすべて、同じファミリ内の異なるフォントではなく、単一のフォント フェイスのソースと見なされます。

残念ながら、Chrome は実際には仕様に従っていないようです...

于 2012-10-11T08:00:32.287 に答える
2

最新バージョンの Firefox では、ツール -> Web 開発者 -> エラー コンソールでフォント関連のエラーを表示できます。たとえば、これは私がカスタムフォントで与えるエラーです:

Error: downloadable font: table 'GSUB': OpenType layout data discarded
于 2012-10-11T09:39:44.133 に答える
1

IE、Firefox、Chrome で作業するには、このフォント タイプが必要です。

    @font-face
{
    font-family: 'BHoma';
    src: url('/public/font/BHoma.eot?#')format('eot'), 
    url('/public/font/BHoma.ttf')format('truetype'),
    url('/public/font/BHoma.woff')format('woff'), 
    url('/public/font/BHoma.svg#BHoma')format('svg');
}

ただし、最初にこのリンクからフォントを生成する必要があります

http://www.codeandmore.com/2011/06/font-face-kit-generator/

于 2012-10-10T13:58:21.420 に答える