web-dev-qa-db-ja.com

Firefox 22以上の大きなフォントの回避策

私はWebサイトで作業していますが、Firefoxは非常に大きなフォントを表示しています。 ChromeおよびSafariは通常のフォントサイズを表示しています。 ChromeはWebKitレンダリングエンジンを使用します。 FirefoxはGeckoエンジンを使用します。入力するとFirefoxのフォント表示を変更できることがわかりました

about:config

firefoxのアドレスバーで、変更

 layout.css.devPixelsPerPx

値は1です。これは一部のシステムでは機能する可能性がありますが、ユーザーがこれを行う必要はありません。

フォントが正しく表示されることを確認するにはどうすればよいですか？私はCSSを調整しようとしました

-moz-font-size

およびバリアントですが、動作しません。テキストをすべて画像に変更することはできません。それは間違っています。これに特定の構文はありますか？または、最適な回避策を提案しましたか？

ChromeChrome image

Firefoxenter image description here

fontsfirefox
5
RobSeg

コメントで指定されているように、Firefoxの特大フォントはfont-size-adjustプロパティによって引き起こされるようです（これは、現時点では、Firefoxでのみサポートされています）。このプロパティを完全に削除する（または適切な値に設定する-以下を参照）と、Firefoxの問題が解決します。

font-size-adjustの背後にある考え方は、代替フォントをより読みやすくすることです。 xの高さがプライマリフォントと異なる場合。ただし、この値はすべてのフォントに影響します。通常、 W3Cで定義 のfont-size-adjustプロパティは、プライマリフォントの「アスペクト値」を取ることを意図していると思います、「フォントのxの高さをフォントサイズで割った値」として定義されます（明らかに1よりもはるかに小さくなります）。現在のフォントのアスペクト値よりも大きな値を指定すると、font-sizeが大きくなります。

プライマリフォントが使用できない場合、フォールバックフォントが使用されます。フォールバックフォントの「アスペクト値」が指定されたfont-size-adjust（アスペクト値）プロパティと異なる場合、font-sizeが調整されます。指定されたfont-size-adjustがプライマリフォントのアスペクト値である場合、フォールバックフォントは、プライマリフォント。同じfont-sizeの異なるフォントは、x-heightが異なるため、異なるサイズに見える可能性があり、これは読みやすさに影響します。たとえば、「Verdana」対「Times New Roman」-Verdanaは同じfont-sizeではるかに大きく見えるため、小さいfont-sizesで読みやすくなります。

最初に1.2の値を指定しましたが、これは常にフォントサイズを（すべてのフォントの！）増加させます。値1.2は、小文字xの高さが大文字X！よりも20％大きいことを事実上示しています。選択したフォントのより「通常の」値は0.54（私の推定）です。これよりも大きな値を指定すると、Firefoxのデフォルトのフォントが大きくなります。

W3Cで指定された式 を使用：

  c  =  ( a / a' ) s  
Where
  s  =  font-size value
  a  =  aspect value as specified by the 'font-size-adjust' property
  a' =  aspect value of actual font
  c  =  adjusted font-size to use

font-size-adjustを1.2に指定し、フォントサイズを18pxに指定すると、問題のテキストのフォントサイズは（1.2/0.54）* 18 = 40px（約）になります。 （明らかに非常に大きい！）

font-size-adjustを0.54（プライマリフォントのアスペクト値として推定）に指定した場合、結果のフォントサイズは（0.54/0.54）* 18 = 18になります。変化なし。

マシンにインストールされているフォントのfont-size-adjust（別名「アスペクト値」）を計算するための便利なオンラインツール： http://fontdeck.com/support/fontsizeadjust

5
MrWhite