CSSフォントクロスブラウザの互換性

Question

アイブ氏は、CSSリセットシートおよびその他のいくつかの手法を述べたCSSのクロスの互換性のチュートリアルの束を読んで、私は見て複数の上の正確な同じフォントを持っているウェブサイトを作成できるようにするには至っていませんブラウザ。私はptからpxに切り替えて、少し助けたいくつかの他のテクニックを組み込んだ。誰もがより良い技術を知っていますか？

おかげ

Answer 1

私はあなたが話しているのか正確に知りませんが、正確に（ピクセル）は、同じすべてのブラウザであることを行ったことがないです。たとえば、私はOS XがWindowsよりもフォントを広くする傾向があることに気がついた（テキストのアンチエイリアスのため）。異なるブラウザでは、同じフォントであってもレイアウトが多少異なります。レイアウトによっては、フォントが複数のピクセルになることがあります。

Answer 2

フォントをと同じにしたい場合は、正確にと同じ（サイズとすべて）のヘッダーについてのみ話しているので、イメージを使用してみてください。

さらに、@font-faceと一部の生成されたフォントが使用されます。

いくつかのブラウザ用の個別のフォントファイルを生成するFontSquirrelをチェックしてください。

http://www.fontsquirrel.com/fontface

Answer 3

typekitも、既に述べたもののものの横にあなたのための解決策になるかもしれません。

https://typekit.com/

あなたは、ユーザーのマシンにのみ、彼らは実際に自分のコンピュータ上でこれらのフォントを持っている場合、あなたが選びだしているフォントを表示できることに注意しなければなりません。

f.e font-family: "Super Font", Helvetica, sans-serif;あなたは、彼らが自分のマシン上でそれを持っていない可能性があります原因ユーザーのマシンは、この正確なフォントを表示しません「スーパーフォント」と呼ばれるフォントを選びだした場合は

。あなたのCSSにdeclairedように、ユーザのマシンは現在、コンピュータのほとんどは、自分のマシンに持って代わる「ヘルベチカ」、見てますので、「ヘルベチカは、」つもりが表示されています。いなくても「ヘルベチカ」が利用可能な場合、ユーザーのマシンには、サンセリフのフォントが表示されます。ネイトBは、既に述べたように、彼らは違ったレンダリングを取得原因彼らは外観とフォントの太さに少し異なっていることが、Link

あなたはすでに次を参照してください。

は、ここで一般的なフォントのリストです。

あなたの「スーパーフォント」を使用したい場合はジェイソン・ジェンナーロが既に推奨されているようにhttp://www.fontsquirrel.com/fontfaceを見てみましょう。そこすべてのマシンがするように、あなたは、唯一のフリーフォントの多くからフォントを選択するだけでなく、独自のフォントをアップロードし、右のあなたのCSSにあなたがそれらを構築するために必要なすべてを取得するためにする@ font-faceジェネレータを使用していないことができますそれらを表示することができます（@ font-faceがサポートされている限り、Link）。既にうまくサポートされていても、常にフォールバックフォントを宣言してください。

そして、ここでは、フォントサイズを宣言するさまざまな方法についての良いブログ記事です

： Link

あなたは少し深く掘ると異なるデバイス上でフォントサイズを制御する方法を見つけ、これをチェックしたい場合記事：Link