web-dev-qa-db-ja.com

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

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

ブラウザー固有のJavaScriptを記述してフォントプロパティを変更する以外に、クロスブラウザーでのフォントのレンダリング方法を標準化する他のオプションがあります。おそらくいくつかのライブラリまたはAPI?たぶん、フォントのプロパティをより具体的に宣言することの問題でしょうか?正直なところ、私は立ち往生しており、助けが必要です。

11
Zach Lysobey

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

13
John Conde

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

私が使用していない別のアプローチには、フラッシュの使用が含まれます。知っていること以外、これに関する情報はあまりありません。

1
Kenneth

他の人がすでに指摘したように、私たちは完全にコントロールすることはできません。しかし、ブラウザに全体的に同じようにレンダリングさせるのに役立つと思ういくつかのことを言及する価値があると思います。どちらも「基本に戻る」種類のことで、多くの人がすでにやっていることですが、基盤を築くと成功するか失敗するかを設定することが多いため、言及する価値があると思います...

CSSリセット。概念は単純です。スタイルシートでHTMLタグのデフォルトを設定して、HTMLレンダリングの共通の開始点を設定します。以下に記事と例を示します。 http://meyerweb.com/eric/tools/css/reset/

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

1
ph33nyx