0

クライアントが使いたい書体は「Courier」です。Courierはすべてのコンピューターやスマートフォンにインストールされているわけではありません。そこにない場合は、「CourierNew」にフォールバックします。「CourierNew」は「Courier」よりも薄い書体であり、さまざまなOSやブラウザ間でページの外観をできるだけ一貫させたいと考えています。そこで、「Courier」がインストールされていない場合は、「CourierNewBold」を使用してみませんか。下の画像を参照してください。

Courierがさまざまなブラウザでどのようにレンダリングされるか この画像を作成した後、私はさらに混乱しました。別のOSでフォント（つまり「CourierNew Bold」）を呼び出す方法を説明するために、cssのfont-family宣言にさらにいくつかのフォント名を追加しました。これは新しい宣言です：

font-family: Courier, CourierNewPS-BoldMT, 'Courier New Bold', 'Courier New Fett', monospace;

ここで奇妙な部分があります。WindowsXPのChromeでは、テキストは以前と同じように薄くレンダリングされます。そして、それはモバイルサファリでも同じです。

私が疑うのはこれです：Chrome（WinXP）とMobile Safariはどちらも、私が宣言した最初のフォントのみをチェックします。彼らはそれが「宅配便」だと見ています。「Courier」がインストールされていないため、「CourierNew」を提供します。これらは、CSSで宣言した他のフォントを考慮していません。

この長い投稿でごめんなさい。私の問題はこれに要約されます：すべてのOSとブラウザで一貫して「Courier」または「CourierNewBold」としてテキストを表示するにはどうすればよいですか？

ライブの例はここにあります。

更新： CSSについて読ん-webkit-font-smoothing: antialiased;で追加しましたが、これで問題が解決するわけではありません。WindowsとiOSでは、テキストはまだはるかに薄く見えます。

Update2： 2007年のこの投稿では、CourierがiOSでCourier Newとして表示される方法と、それがうまくいかない理由について説明しています。ただし、iOSの新しいバージョンがまだ同じように動作するかどうかはわかりません。

4

2 に答える 2

2

CSS にはプログラミング機能がないため、「可能な場合はフォント A を通常の太さで使用し、そうでない場合はフォント B を太字で使用する」などの表現は CSS ではできません。CSS 用語では、フォント ファミリとフォント サイズは互いに独立しています。

Courier の埋め込みが許可されていないことを確認した場合は、Courier に似せて作成された使用可能なフリー フォントを確認してください。手始めに、 http://en.wikipedia.org/wiki/Courier_%28typeface%29#Free_alternativesを確認して ください。 クライアントがそれらの一部を受け入れることができる場合は、@font face. (Courier は Comic Sans と競合する最悪の選択肢であり、Courier がまだ利用可能なコンピューターでの視覚的な大胆さは、ビットマップ フォントとしての実装が原因である可能性があることをクライアントに既に説明したと思います。これにより、大きなサイズや高解像度のレンダリングでは見栄えが悪くなります. クライアントがまだ主張する場合は、無料のクーリエのようなフォントがおそらく最も簡単で、技術的に最も信頼できるアプローチです.

于 2012-08-08T11:10:31.543 に答える
1

無料のCourierのようなフォントを入手し、それをWebフォントとして埋め込んで、「すべてのOSとブラウザで一貫して」表示されるようにします。これは、サイトを最初に設計するときにあなた/あなたの顧客が念頭に置いていたフォントをユーザーに見せる唯一の方法です。

于 2012-08-08T11:24:50.850 に答える