0

何らかの理由で、追加しようとしているフォントが自分の Web サイトに追加されません。画像でこれを行いたくないので、フォントが壊れている可能性はありますか? otfまたはttfだけで修正できますか？

私のコード（何か不足している場合）：

@font-face {
    font-family: urbanJungle;
    src: url('UrbanJungleDEMO.ttf');
}
h1 {
    font-family: urbanJungle;
    font-size: 100px;
    color: #34495e;
}

追加の詳細: これは最新の Chrome にあり、他のカスタム フォントが機能します。

ネットワーク コンソールのフォントは赤く、キャンセルされたと表示されます。

ライブ URL: http://codestack.co.uk/website/

フォントは Dafont のもので、自分で特別な処理を加えていません。インデックス ページと同じディレクトリにあります。関連するすべての CSS が含まれています。

4

2 に答える 2

2

これには Font Squirrel font-face generator を使用する必要があります: http://www.fontsquirrel.com/tools/webfont-generator

ブラウザごとに異なるフォント形式が必要ですが、指定したのは 1 つだけです。ジェネレーターは、フォントを必要なすべての形式に変換し、CSS ファイルも簡単に提供します。

于 2013-08-08T23:00:10.290 に答える
0

TrueType フォントのみを使用しています。IE は *.eot フォントのみをサポートしています。そして、あなたは多くの情報を見逃しています。単一のフォントを使用する代わりに、常にフォント スタックを使用することをお勧めします。最初のフォントがなくなった場合は、css リストのすぐ次のフォントを使用します (font-stack と呼ばれます)。

Paul Irish による @font-face に関する興味深い記事は次のとおりです。Bulletproof @font-face Syntax

@font-face{
    font-family:MyFont;
    src:url(../font/MyFont.eot);
    src:local('?'),
        url(../font/MyFont.woff) format("woff"),
        url(../font/MyFont.otf) format("opentype"),
        url(../font/MyFont.ttf) format("Truetype"),
        url(../font/MyFont.svg#myfont) format("svg");
    font-weight: normal;
    font-size:normal;
}
body{
 font-family: "MyFont", Verdana, sans-serif; /* Font stack */
}
于 2013-08-17T22:48:18.070 に答える