3

すべてのブラウザでまったく同じテキストを表示しようとしています。

私はヘルベチカを使用していますが、これはすべてサポートされています。

各ブラウザが独自の方法でテキストのスタイルを設定することを（難しい方法で）発見したので、すべての主要なブラウザでテキストを100％同じにするためにカスタマイズする必要があるプロパティは何ですか

既に設定したプロパティは font-family、font-size、font-weight、line-height、text-decorationおよびletter-spacingですが、ff と chrome でテキストを見ると、特定のテキストの幅に違いがあることがわかります。高さは同じだと思います。

4

4 に答える 4

3

同一の CSS ルールと同一のフォント ファイルを使用しても、完全に同一のレンダリングになることはありません。

  1. 最新のフォント形式は、重複する命令のレイヤーで構成されており、「新しいより良い」方法は以前の反復を置き換えるのではなく、それらに加えて存在します。利点は、古いソフトウェアでも古いスタイルの命令を読み取ることができ、以前と同じように機能することです。欠点は、同じプロパティがさまざまな方法で記述されており、同じ結果が得られないことです (最新のレイヤーが最良の結果をもたらすと思われるかもしれませんが、フォント デザイナーは古いレイヤーを広範囲にテストおよびデバッグしただけである可能性があります)。

  2. 傷害に侮辱を加えるために、一部はシステム固有 (Windows、OS∕2、OSX など) であるため、同じ世代のソフトウェアでさえ、ターゲット システムによっては同じ命令を読み取れません。

  3. 最後に、フォントに命令レイヤーが 1 つしか含まれておらず、すべてのブラウザーがそれを完全に読み取ったとしても、解釈にはある程度の余裕があります。ピクセル密度の高い理想的な Retina スクリーンでは、すべて同じ形状と座標を使用しますが、実際のスクリーンではピクセル密度が低すぎて、小さくて複雑なテキスト形状を正確に表示できません。そのため、テキスト エンジンは、シャープだがくすんだ線 (グリフの形状を歪め、モノクロ ピクセル グリッドにスナップする) を表示するか、滑らかだがぼやけた線 (ピクセルのグレーネス レベルまたはサブピクセル カラーで再生することによって理想的な形状に近づける) を表示するかを選択できます。これらの調整により、テキスト ピクセルが移動します。
    システムのテキスト レンダリング規則によっては、同じではありません。OSX は滑らかでぼやけたレンダリングに傾倒し、Windows はシャープで使い古されたレンダリングに傾倒し、Linux はその間のすべての選択肢をカバーします。

  4. もちろん、同じシステムでも、利用可能なハードウェアの品質 (ピクセル密度) によっては、同じソフトウェアが同じ選択を行うわけではありません。

テキスト エンジンが選択できるすべての可能なレンダリング戦略に関する洞察については、
https://docs.google.com/document/d/1wpzgGMqXgit6FBVaO76epnnFC_rQPdVKswrDQWyqO1Mを参照してください。

通常、Web サイトからブラウザによって選択されたテキスト レンダリングの侵害を制御することはできません。osx で Windows スタイルのレンダリング (またはその逆) を強制できたとしても、Web サイトを画面上に表示される他のすべてのテキストと同じように動作させたいと考えているユーザーを悩ませるだけです。実際、Web サイトがブラウザのフォント レンダリングの選択に寛容であればあるほど、より良いものになります。Web サイトは動的です。Web サイトはリフローできます。ピクセルパーフェクトはユーザーの理想ではありません。ピクセルパーフェクトが必要な場合は、ビットマップ画像を提供すると、それがどれほど高く評価されているかがすぐにわかります.

したがって、@font-face は特定のデザイン効果にのみ使用し、サイトで特定のテキスト ピクセルの配置を強制しようとしないでください。最初のものは美しく機能します。第二に、まったくありません。@font-face を使用する場合、フォントは著作権で保護されていることを忘れないでください。そのため、フォントを共有するには法的な許可が必要です。

PS。Helveticaは古いフォントデザインです。さまざまなシステムで「Helvetica」を要求すると、多くの結果が得られることが何度も導出されています。というわけで @font-face なしではWeb上で使えないフォントです。

于 2013-08-29T21:57:57.010 に答える
1

Pleun が述べたように、良いスタートを切るためのリセット スタイル シートがいくつかあります。しかし、どんなに頑張っても、100%同じ見た目にはなりません。これは、ブラウザと OS が使用するフォント レンダリング戦略が異なるためです。

一部のブラウザーでは、フォント レンダリング手法を制御できます。Webkit ブラウザーについては、こちらをご覧ください http://maxvoltar.com/archive/-webkit-font-smoothing

于 2012-04-29T07:04:01.933 に答える
1

Yahoo http://yuilibrary.com/yui/docs/cssreset/のリセット スクリプトから開始できます。

于 2012-04-29T06:57:28.247 に答える
0

すべてのブラウザーが helvetica を「サポート」していますか? どのブラウザについて話しますか? http://blog.mhurrell.co.uk/post/2946358183/updating-the-helvetica-font-stackには、helvetica を使用しないか、少なくとも使用できないブラウザーが多数あります。ライセンス版の helvetica を提供している場合を除きます。私はあなたがそうではないと仮定しています。

そのリンクは、クロスブラウザー/プラットフォームの helvetica 用により優れたフォント スタックを構築することに関するものです。あなたは他の人を見つけることができます、もっと読む：

http://css-tricks.com/snippets/css/better-helvetica/

http://www.awayback.com/revised-font-stack/

http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

于 2012-04-29T07:13:01.467 に答える