1

私の問題は、ローカルでホストされているWebフォント（これをゴシックと呼びます）を使用していて、スタイルシートに適用するフォントサイズが宣言されたバックアップフォントに劇的な影響を与えることです。

例：簡単にするために虚数を使用します。

ゴシックのサイズは48、pxまたはemで、幅は約300pxです。バックアップフォントのArialは、何らかの理由でロードされる場合、48ピクセルまたはemで、約1200ピクセルの幅でロードされます。

書体がこんなふうに振る舞うのを見たことがないので、ファイル形式の構成がおかしいのではないかと思いますが、よくわかりません。どんな助けでも大歓迎です。

4

2 に答える 2

1

まず、ブラウザの@ font-faceサポートを見て、次の点に注意してください。

  • EOT形式はIEでのみサポートされます
  • WOFFは、IE8以外のすべてのブラウザでサポートされています
  • SVGはIEとFirefoxではサポートされていません
  • TTF / OTFは、IE以外のすべてのブラウザで十分にサポートされています

ブラウザをカバーしていますか？

次に、@font-faceをまったくサポートしていないブラウザにフォールバックを提供する必要があります。

ドキュメントのヘッドセクションにModernizerを含めることをお勧めします。

Modernizerのダウンロードページで@font-faceを選択してCSSクラスを追加するか、このダウンロードリンクをたどってください。

Modernizerはページの<html>要素にクラスを追加するため、このクラスを使用して、特定の機能をサポートしていないブラウザーの設定をオーバーライドできます。このルールはドキュメント全体に適用されます。

.no-fontface {
    font-size:16px; /* the font size value for Arial only */
}

他のルールの下に配置する必要があります。または、ルールfont-sizeを宣言して、スタイルシートの任意の場所に配置することもできます。font-size:16px !important;上書きされません（important!もちろん、他のルールを使用する場合を除きます）。

特定の要素をターゲットにする場合.no-fontfaceは、セレクターの先頭に配置する必要があります。例えば：

.no-fontface #header h1 {
    font-size:18px;
}
于 2012-09-15T13:22:05.930 に答える
0

理想的には、フォントスタックに対して同様の比率のフォントのグループを選択する必要があります。好みのフォントに似たOSで期待できるフォントがない場合、現時点では実際にできることはありません。

フォントサイズは、ユーザーが変更できるため、とにかく信頼できるものではありません。彼らがそうするとき、あなたのデザインはどうなりますか？

于 2012-09-15T13:11:49.350 に答える