2

Open SansGoogle Fonts API / CSS を介してOpenType Webフォントを読み込んでいます。

Chrome 43 (Linux+Windows) と Internet Explorer 11 (Windows) の両方で、ブラウザーはフォントで指定されたとおりにテキストをレンダリングします。ただし、Firefox 38.0.5 では、一部の文字でテキストの幅や間隔が異なる方法でレンダリングされます。すべてのフォント バリアントはデフォルト値 (「通常」) です。

例として、文字1、a、b、およびを使用できますi。Open Sans の "unitsPerEm" は 2048 です。したがって、18.0px のフォント サイズでは、上記の各文字の 30 文字の幅は、1/u * p * c * w に基づいて次のようになります。ここで、u = 2048、p = 18.0、c = 30、w は各文字の前進幅です ( Wolfram Alpha 方程式)。

+----------------------------------------+-------- ---+
| | チャー | フォント (px) | numChars | 進む | 幅 (ピクセル) |
+--------+---------+----------+-----------+--------+-------- ---+
| | 1 | 18.0 | 30 | 1171 | 308.76 |   
| | | | 18.0 | 30 | 1139 | 300.322 |
| | b | 18.0 | 30 | 1255 | 330.908 |
| | 私 | 18.0 | 30 | 518 | 136.582 |
+----------------------------------------+-------- ---+

これ ( JSFiddle ) は、キャンバス メソッドを使用して、、、、およびのそれぞれのmeasureText30 文字の幅をピクセル単位で出力します。1abi

Chrome のテキストの長さは、期待される値と正確に一致します。

クロム幅

aFirefox Linux のテキストの長さは、Firefox がサブピクセル精度を提供しないという事実を考慮した後でも、を除くどの文字とも一致しません。

Firefox Linux の幅

canvas によって報告された幅が実際に Chrome と Firefox の両方で出力されるものであることを確認しました。次の画像は背景が赤で、Chrome のテキストは黒、Firefox のテキストは白です。 Gimp「測定」ツール。Firefox のbandiは広1すぎ、狭すぎます:

Chrome と Firefox の比較

aまた、補足として、Firefox Windows のテキストの長さは Firefox Linuxとさえ一致していませbん。1i

Firefox Windows の幅

これは、デフォルト設定で拡張機能がインストールされていないクリーンな Firefox プロファイルです。

誰かが何が起こっているのか、また Firefox にフォント仕様に従って強制的にフォントをレンダリングさせる方法を説明できますか?

更新: Windows では、問題を解決するように設定を設定しますgfx.font_rendering.directwrite.enabled(trueこれは、ハードウェア アクセラレーションが利用可能な場合の Firefox のデフォルトであると考えられます。この設定は、私のテスト用 VMWare システムのように、ハードウェア アクセラレーションが利用できない場合でも強制的に有効にします)。DirectWrite は、バージョン 37 以降、Windows 上の Chrome のデフォルトです。Linux の動作はまだ説明されていません。このブログ投稿では、Windows 上の Firefox での DirectWrite レンダリングについて詳しく説明しています。

4

1 に答える 1

2

(この回答は、質問のコメントで提起された主なポイントと、質問が投稿された後に行われた一連の追加調査をまとめたものです。)

さまざまな複雑な理由により、すべてのブラウザー/OS/フォント サイズの組み合わせが同じ方法で画面に表示されるわけではなく、フォントの仕様に常に従うわけでもありません。したがって、一般に、アプリケーションは、テキストをピクセル単位で正確に配置する必要がないように作成する必要があります。

サブピクセル テキスト レンダリングの構成

サブピクセル テキスト レンダリングをサポートするための特定のブラウザー/OS の組み合わせの構成に関するいくつかのコメント:

ウィンドウズ

  • (以前の GDI メソッドとは対照的に) DirectWrite をサポートして有効にするブラウザーは、リニアでヒンティングされていないサブピクセルのテキスト配置をサポートする傾向があるため、フォント アドバンス幅の仕様に従うことができます (通常は従います)。これにはChrome 37 以降とFirefox 4以降が含まれます。
    • gfx.font_rendering.directwrite.enabledハードウェア アクセラレーションが利用できない場合、Firefox はデフォルトで DirectWrite を無効にしますが、config プロパティを に設定することで有効にできますtrue。
    • Chrome 37 以降の DirectWrite はデフォルトでオンになっていますが、フラグを設定して無効にすることができますDisable DirectWrite。
    • Internet Explorer (9+?) DirectWrite はデフォルトでオンになっていますが、互換モードを設定することで無効にすることができます。

Linux

サブピクセル レンダリング用に fontconfig をセットアップし (通常は Gnome または KDE ディスプレイ マネージャー設定を使用しますが、fontconfig 構成ファイルを介して手動で行うこともできます)、freetype-freeworld (非無料のサブピクセル レンダリング サポート)、およびfontconfig サポートのないアプリケーション用に追加Xft.lcdfilter: lcddefaultします。LCD ディスプレイ タイプ~/.Xresourcesに基づいて、サブピクセル レンダリングの正しいタイプを設定します。

  • 基盤となるディスプレイがサブピクセル レンダリングをサポートし、構成されている場合でも、ブラウザーの動作に一貫性がないように見えます。
    • Chrome の最近のバージョン (44 個のテスト済み) は、リニアでヒントなしのサブピクセル テキスト配置をサポートしているように見えるため、通常はフォント仕様に従います。RGB サブピクセル テキスト レンダリングを有効にした KDE 4.14 でテスト済み。
    • Firefox (テスト済みの 38.0.5) は非線形のヒント付き配置を行っているように見えるため、ディスプレイがサブピクセル レンダリング用に構成されていても、フォントの仕様には従いません。Firefox にサブピクセル テキスト レンダリングを強制的に使用させる方法を特定できませんでした。

MacOS/X

このプラットフォームに関する情報はまだありません。

ピクセル単位のポジショニング

困難にもかかわらず、ピクセル単位で完璧なテキストの配置と検査を必要とするアプリケーションを構築する場合、一般的に次の 2 つの方法があります。

1) Canvas または DOM ベースのテキストの幅/高さの測定: JavaScript でテキストの幅を計算するを参照してください。Mike Kamermans (Pomax) による Font.jsも参照してください。

2) OpenType.jsを使用してソース フォントからテキストのサイズを決定します。これは、機能する場合は上記の方法よりも高速ですが、すべての場合に機能するとは限りません。

于 2015-06-21T04:54:22.547 に答える