異なるWebブラウザ間でフォントを同じようにレンダリングするにはどうすればよいですか?


11

私はクライアント用のWebサイトを構築しており、ナビゲーションバーの画像ではなくプレーンテキストを使用したいと考えていました。私たちが使用しているフォントはCentury Gothicです(このフォントはほとんどのPCとMacで利用できると思います)問題は、ブラウザーによってフォントのレンダリングが大きく異なることです。Chromeでは希望どおりの外観になりましたが、Firefoxではテキストが小さく太字になっています。

フォントのプロパティを変更するためのブラウザ固有のJavaScriptを作成する以外に、フォントがクロスブラウザでレンダリングされる方法を標準化する他のオプションがあります。おそらくいくつかのライブラリまたはAPIですか?多分それはフォントのプロパティを宣言する際により具体的な問題でしょうか?正直なところ、行き詰まり、助けが必要です。

回答:


13

ブラウザ間で同じようにレンダリングするために、フォントやその他のことを取得するつもりはありません。フォントの処理は完璧な例です。Windows上のSafariは、何らかの理由でテキストを太字にしたいことを知っています。残念ながらこれはウェブの仕組みです。さまざまなブラウザ、OS、モニター、グラフィックプロセッサなどが存在するため、ユーザーがWebページを表示する方法は数千または数万に及ぶ可能性があります。したがって、WBEのために構築するときは、サイトがすべての人にとってピクセルパーフェクトではないことを認識し、期待して実行する必要があります。これはプリントではありません。それは野生の野生のウェブです。


いや、これは残念な現実のようです。ただし、誰かが少し正規化に近いJavaScriptを書くことが可能であるように思われます。
Zach Lysobey

残念ながら、これはコードの問題ではなく、ソフトウェアとハ​​ードウェアの問題です。これがブラウザの開発方法であり、ハードウェアアクセラレーションが進むと、さらに悪化します(フォントを有効にしたユーザーにとってはフォントはより滑らかに見えます)。
ジョンコンデ

1
この記事(および同じシリーズの他の記事)では、興味があれば問題を詳しく説明しています。blog.typekit.com/2010/12/17/...
paulmorriss

最良の答えを選択しました。あなたはそれをコードの問題ではないと言いますが、確かに誰かがコードを書いて、1行のテキストがピクセル単位の最小幅に引き伸ばされる可能性があります。それ自体でこの状況は大幅に改善されます。レンダリングされた<p>の幅をテストし、それに応じて文字の間隔を広げることができます。多分?
Zach Lysobey 2011

@Zach-確かな計画とスマートなコーディングにより、多くの障害を克服できます。しかし結局のところ、私たちが制御できるのはそれほど多くはありません。基本的には、WindowsのSafariのような問題を受け入れ、残りの部分をコード化できるのであれば、うまくいくはずです。
ジョンコンデ

1

実際には、CSSにフォントを埋め込む方法があります。とても簡単です。これを行う方法の詳細については、http://randsco.com/index.php/2009/07/04/p680を参照してください。これの欠点は、古いブラウザー(pre ei 7およびff 3だと思います...)がこれをサポートしていないことです。しかし、これらの古いブラウザを使用している人の数は急速に減少しており、機能する代替フォントを指定することは依然として可能であり、通常、念のためほとんどのPCで使用されています。

私が使用していないもう1つのアプローチは、フラッシュの使用です。私はそれについて知っている以外、私はこれについて多くの情報を持っていません。


cssメソッドを使用する場合、そのフォントファイルはWebサイトにアクセスできるすべてのユーザーが利用できるため、cssのメモでは、著作権を侵害しないフォントのみを使用するようにしてください。
ケネス

そのFlashメソッドはsIFRと呼ばれます。長所と短所もあります。
ジョンコンデ

このアプローチを使用しても他の回答で述べたように、ブラウザーとシステムの間にはわずかな違いがありますが、サイトの設計の残りの部分で実行できることにより、さまざまな構成全体でサイトを補正して適切にレンダリングできます。重要なことの1つは、複数のブラウザと、できればオペレーティングシステムを使用してサイトをテストすることです。
ケネス

1

他の人がすでに述べたように、私たちは完全な制御はできません。しかし、ブラウザで全体的に同じようにレンダリングできるようにするために役立つと思われるいくつかの点について言及する価値があると思います。どちらも「基本に戻る」ようなものですが、多くの人がすでにやっていることですが、構築した基盤が成功または失敗の原因となることが多いので、言及する価値があると思いました...

CSSリセット。コンセプトは単純です。スタイルシートでHTMLタグのデフォルトを設定して、HTMLレンダリングの一般的な開始点を設定します。ここに記事と例があります:http : //meyerweb.com/eric/tools/css/reset/

Doctype宣言。http://htmlhelp.com/tools/validator/doctype.html

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.