0

私は 、 FrenchScriptStdとFuturaStd-Light の2 つの商用フォント を使用しています (個別に購入し、それらを使用して Web ページを作成しています)。

これは、この種の商用フォントを使用した最初のページです (Google フォントを試しましたが、これらのフォントはありません)...

@font-face {
  font-family: 'FrenchScriptStd';
  font-style: normal;
  font-weight: 400;
  src: local('FrenchScriptStd'), url('css/FrenchScriptStd.ttf') format('ttf');
}

@font-face {
  font-family: 'FuturaStd-Light';
  font-style: normal;
  font-weight: 400;
  src: local('FuturaStd-Light'), url('css/FuturaStd-Light.ttf') format('ttf');
}

#fontface1{font-family : Font1; }
h1{font-family : Font1; }
#fontface2{font-family : Font2; }
#nav a {font-family : Font2;}

h1使用時はフランス語フォント、 #nav使用時はfuturaフォントを表示したい

/*  Typography
=============================================================== */
h1 { color:#cc6602; font-size:36px; font-family:FrenchScriptStd, arial, serif; font-weight:normal; padding-bottom:14px; }

#nav a {font-family:FuturaStd-Light, arial, serif; text-decoration:none; color:#a8241b; font-size:20px; text-shadow:0 1px #fff; display: block; }

私のPCでは動作しているようですが、一部のコンピューターでは正しく表示されません.これを修正する方法はありますか.

4

2 に答える 2

7

「一部のコンピューター」でフォントが表示されない理由は、これらのコンピューターには、最初にテストしていたブラウザーとは異なるブラウザーがインストールされている可能性があり、異なるフォントファイルが必要なためです。、TrueType 以外。

私が使用し、多くの成功を収めている構文は次のとおりです。

@font-face {
    font-family: 'FrenchScriptStd';
    src: url('css/FrenchScriptStd.eot');
    src: url('css/FrenchScriptStd.eot?#iefix') format('embedded-opentype'),
         url('css/FrenchScriptStd.woff') format('woff'),
         url('css/FrenchScriptStd.ttf') format('truetype'),
         url('css/FrenchScriptStd.svg#FrenchScriptStd') format('svg');
    font-weight: normal;
    font-style: normal;
}

これは、FontSquirrel が使用する @font-face スタイルだと思います。

この例では、フォントをさまざまな Web 形式に変換していないことに注意してください。すべてのファイルを変換するためにオンラインで使用できるサービスを次に示します。

ファイルが外部でホストされていて、それらが使用されているのと同じドメイン上にない場合、MIME タイプとヘッダーで問題が発生し、FireFox ブラウザーがフォント ファイルをダウンロードしない可能性があるため、これらのフォント ファイルをローカルでホストする必要があります。

また、モバイル ブラウザや古いバージョンの IEでは、マイレージが異なります。:)

于 2012-09-20T05:05:41.313 に答える
-3

Web ページを表示するすべてのコンピュータにフォントをインストールする必要があります。

于 2012-09-20T04:47:01.453 に答える