12

次のように、CSS を介して HTML 要素のスタイルを設定していpreます。

pre {
    font-family : "Franklin Gothic Medium","Arial Narrow Bold","Arial",sans-serif;
}

また、Chrome/Chromium、Opera、Safari、IE (つまり、フォントが実際にコンピューターにインストールされていることを意味します) では機能しますが、Firefox では機能しません。Firefox はArial.

また、他のカスタム フォント ( など) を試してみたところ、Century Gothic動作するため、カスタム フォントを認識できます。

要するに、Firefoxは認識していFranklin Gothic Mediumません。Arial Narrow Bold

  • それらはコンピュータにインストールされています
  • 他のカスタム フォントを認識できる

ここで何が起こっているのでしょうか？

4

2 に答える 2

32

解決策は簡単ではありません。フォントの外観は、ブラウザ、OS、そしてもちろんクライアントのシステムで使用できるフォントによって異なります。ターゲットオーディエンスに基づいてさらにテストすることなく、この答えを額面通りに受け取らないでください。

Windowsでは、Firefox 4およびIE9以降、フォントはGDIではなくDirectWriteを使用してレンダリングされます。この変更以降、「ArialNarrow」や「ArialBlack」などのフォントは、スタンドアロンファミリではなく、Arialファミリの一部と見なされます。そのため、Firefoxでは、いくつかの修飾子を指定した通常のArial宣言を介してArialNarrowにアクセスします。IE9も同様に機能しますが、開発者が慣れている方法で機能するように、実用的なチートが組み込まれているようです。

フランクリンゴシックミディアム

font-family: "Franklin Gothic Medium", "Franklin Gothic", sans-serif;

Firefoxを除くすべてのブラウザは、「フランクリンゴシックミディアム」を理解しています。Firefoxは、次の選択肢である「フランクリンゴシック」に進みません。これは、あなたが持っているとは思わないかもしれませんが、DirectWriteの世界で「フランクリンゴシックミディアム」が存在する場所です。他の修飾子（斜体、太字、ストレッチ）がない場合、「フランクリンゴシック」が指定されていると、Firefoxは「フランクリンゴシックミディアム」を取得します。

Arial Narrow Bold

font-family: "Arial Narrow Bold", "Arial Narrow", "Arial", sans-serif;
font-stretch: condensed;
font-weight: 700;

ChromeやIE7–8などの一部のブラウザは、「ArialNarrowBold」を認識します。しかし、IE9とFirefoxはそうではありません。IE9は「ArialNarrow」を認識します。FirefoxはArialに分類されます。font-stretch: condensedFirefoxにArialの「ArialNarrow」バージョンをfont-weight: 700;使用するように指示し、IE9とFirefoxの両方に「ArialNarrowBold 」バージョンを使用するように指示します。600、700、800、900のフォントの太さは、私にとって太字のきっかけになっています。

フランクリンゴシックミディアム、ArialNarrowBoldフォールバック

今、あなたはキャッチ22を持っています。

font-family: "Franklin Gothic Medium", "Franklin Gothic", "Arial Narrow Bold", "Arial Narrow", "Arial", sans-serif;

Firefoxが「FranklinGothic」を検出できれば問題ありませんが、検出できない場合は「Arial」にフォールバックします。font-stretch: condensed; font-weight: 700;これを「ArialNarrowBold」に変換するために使用すると、Arialフォールバックを使用しない場合のFranklinの外観に影響します。フランクリンが利用可能な場合、すべてのブラウザがfont-weightルールをフランクリンに適用します。必要なものではありません。を使用font-stretch: condensedし、FirefoxがFranklinにアクセスできる場合、Firefoxはそれを忠実に凝縮します。（他のブラウザでは表示されませんでした。）特定の状況では、FirefoxがFranklinを取得することを期待し、通常のArialがフォールバックとして使用されることを受け入れます。ただし、「Franklin Gothic」（FFの場合）と「ArialNarrow」（IE9の場合）を追加すると、非常に役立ちます。

（執筆時点では、Chromeはバージョン21で、Firefoxはバージョン14です。）

于 2012-08-29T18:22:27.563 に答える
2

解決策が見つからない場合は、CSS3 フォント ルートに進みます。http://www.w3schools.com/css/css3_fonts.asp

于 2012-08-09T06:52:20.157 に答える