[CSS] 翻訳: ピクセル フォント サイズのリスク_html/css_WEB-ITnose

原文: Stop Maiming Bodies:The Perils of Pixel Font-Size

著者: Natalia Balska

あなたが視覚障害または失読症だったらと想像してみてください。ブラウザにはフォント サイズ設定が組み込まれており、ブラウズを開始する前にデフォルトのフォント サイズを大きくすることができます。奇妙なことに、ほとんどの Web サイトのテキストは依然として小さく表示されるため、ブラウザの設定に戻ってフォント サイズを再度大きくします。ページに戻ると、設定がまったく機能していないことがわかります。

ここ数年、私たちは相対単位の使用方法を学び、徐々に相対単位の使用を受け入れてきました。つまり、ピクセル化されたフォント サイズを使用する代わりに、rem または em を使用します。

多くのプログラマーは、依然として html または body タグの「初期」フォント サイズを、多くの場合 px で設定しています。相対単位を完全に理解していない場合は、すべての em と rem が初期値に関連付けられているため、これが役に立ちます。

/* body的字体有一个固定的值 */body { font-size: 14px; } /* h1的字体设置为2em */h1 { font-size: 2em; } 

残念ながら、この初期値は一部のユーザーにとって不便です。先ほど説明したブラウザ設定は、基本フォント サイズを設定するだけです。すべての絶対単位 (px、pt、inch など) によって上書きされます。

/* 模拟浏览器的字体设置 */html { font-size: 18px; }/* 绝对单位会覆盖掉浏览器的设置 */body { font-size: 14px; } 

その結果、ブラウザのフォント サイズが設定されているにもかかわらず、ユーザーは 14px で Web ページを閲覧することになります。

多くの Web サイトは次のようなものです:

• Google.com
• Twitter.com
• Facebook.com
• Github。 com
• Codepen.io

スケーリングとフォント サイズの違い

私が知っている理由があります。 ”

ほぼすべてのブラウザには、ページ全体を拡大できるズーム機能があります。技術的には、パーセントを除くさまざまな単位でスケールできます。これは視覚障害者にとっては素晴らしいことです。

ブラウザのフォント サイズを変更すると、基本のフォント サイズが変更されるだけです。視力は良好でも失読症を患っている人もいます。フォント サイズを大きくすると症状の重症度が軽減されることがあります。

正しい方法

絶対単位は扱いが難しいです。ただし、% や em などの相対単位を使用すると、ブラウザの設定が有効になります。デフォルトでは、1em は約 16 ピクセルです。したがって、実際にデフォルトのフォント サイズを使用しない場合は、font-size を .875em または 87.5% (ほぼ 14 ピクセル) に設定できます。

/*这三种字体设置是一样的:    - font-size: 100%;    - font-size: 1em;    - 或者没有设置字体大小属性    */body { font-size: 1em; } /* 如果用户修改浏览器设置,正文和标题文本将相应的规模的变化 */h1 { font-size: 2em; } 

これらのサイトは素晴らしい仕事をしています:

• Sitepoint.com
• Smashingmagazine.com

結論

業界ではテキストの組版に絶対単位を使用するのが一般的ですが。おそらく、相対単位では body 要素に基づいてさまざまなフォント サイズを計算するために深くネストされた要素が必要であるのに対し、これは明示的であるためです。

しかし、これはよく考えられていないかもしれません。視覚障害者や失読症の人が Web をより適切に操作できるようにするには、相対単位を使用する必要があります。