font-size-adjust 属性が Web ページのレイアウトを最適化する方法

今回は、font-size-adjust属性Webページのレイアウトを最適化する方法と、font-size-adjust属性を使用してWebページのレイアウトを最適化するための注意事項について説明します。 、見てみましょう。

CSS の font-size-adjust プロパティを使用すると、開発者は小文字の高さに基づいてフォント サイズを指定でき、Web テキストの読みやすさを効果的に向上させることができます。

この記事では、font-size-adjust プロパティの重要性を学ぶだけでなく、プロジェクトでそれを使用する方法も学びます。

フォントサイズ調整の重要性

あなたが訪問するウェブサイトのほとんどはテキストで構成されているため、書かれたテキストはウェブサイトの重要な部分であるため、それを表示するために使用する情報に注意を払う価値があります。上のフォント。適切なフォントを選択すると、ユーザーは快適な読書体験を得ることができますが、不適切なフォントを使用すると Web サイトが読みにくくなる可能性があります。使用するフォントを決めたら、通常はそのフォントに適切なサイズを選択します。

font-size 属性は、Web ページ内のすべての font-family で使用するフォントのサイズを設定します。ただし、ほとんどの場合、ブラウザーは通常、font-family で宣言された最初のフォントを使用します。何らかの理由で最初のフォントが利用できない場合にのみ、ブラウザは候補フォントを使用してページのレンダリングを続行します。

たとえば、次のコードを見てください:

body {
  font-family: 'Lato', Verdana, sans-serif;
}

ブラウザによって Google Fonts からダウンロードされた「Lato」フォントが利用できない場合、この場合は Verdana フォントが使用されます。ただし、私の頭の中でのフォントサイズの値は、Verdana ではなく「Lato」フォントに設定されているようです。

フォントのアスペクト比とは何ですか?

フォントの外観サイズと可読性は、font-size の値に応じて大きく変化する可能性があり、特にラテン語などのスクリプトの場合、大文字と小文字で大きな違いが生じます。この場合、対応する大文字に対する小文字の高さの比率が、フォントの読みやすさを決定する重要な要素になります。この比率は、フォントのアスペクト比と呼ばれることがあります。

前に述べたように、フォントサイズの値を設定すると、この値はすべてのフォントに適用されます。候補フォントのアスペクト比が優先フォントのアスペクト比と大きく異なる場合、候補フォントの可読性に影響を及ぼす可能性があります。

font-size-adjust 属性は、すべてのフォントの X 軸の高さを均一なサイズに設定してテキストの読みやすさを向上させることができるため、この状況では特に重要な役割を果たします。

font-size-adjust 属性に適切な値を選択してください

font-size-adjust 属性を使用する重要性がわかったので、次は Web サイトでそれを使用してみましょう。この属性の構文は次のとおりです。

font-size-adjust: none | <number>

none はデフォルト値であり、フォント サイズが調整されないことを意味します。

属性の値を数値に設定することもできます。この数値は、Web ページ上のすべてのフォントの X 軸の高さを計算するために使用されます。X 軸の高さは、この数値に font-size を掛けたものと等しくなります。 。 これにより、小さなフォント サイズでの読みやすさが向上します。以下は font-size-adjust プロパティを使用する例です:

font-size: 20px;
font-size-adjust: 0.6;

すべてのフォントの X 高さは 20px * 0.6 = 12px になり、フォントの実際のサイズを変更して X 高さが確実に高くなるようにできるようになりました。常に 12px に等しくなります。調整されたフォントサイズの値は、次の式で計算できます

c = ( a / a' ) s.

ここで、c は調整されたフォントサイズを指し、s は最初に指定されたフォントサイズを指し、a はフォントサイズ調整で指定されたアスペクト比です。属性、a' 実際のフォントのアスペクト比を指します。

font-size-adjust の値を負の数値に設定することはできません。これを 0 に設定すると、テキストの高さがなくなります。つまり、テキストが非表示になります。 Firefox 40 などの古いブラウザでは、このプロパティを 0 に設定することは、このプロパティを none に設定することと同じです。

ほとんどの場合、開発者はさまざまなフォント サイズの値を試して、特定のフォントに最適なフォント サイズの値を決定します。これは、理想的には、すべてのフォントの x 高さが、優先フォントの x 高と同じになるようにしたいことを意味します。言い換えれば、font-size-adjust の最も適切な値は、好みのフォントのアスペクト比です。

フォントのアスペクト比を計算する方法

要确定一种字体合适的纵横比，你可以凭实际经验就是调整后的字体大小应该跟原来声明的字体大小一样。这就是说上面公式中的 a 应该跟 a' 相等。

计算纵横比的第一步是先创建 2 个 元素，每个 元素将会包含一个字母和一个包围着字母的边框（因为我们要进行比较，所以每个 中的字母都必须相同）。同时，每个元素的 font-size 属性值都应该相同，但只有一个元素会使用 font-size-adjust 属性。当 font-size-adjust 的值等于给定字体的纵横比时，每个 下的字母都是一样的大小。

在下面的 demo 中，我创建了一个边框围绕着字母 ‘t’ 和 ‘b’ 并且对每组字母应用了不同的 font-size-adjust 属性值。

以下是相关代码：

.adjusted-a {
  font-size-adjust: 0.4;
}
.adjusted-b {
  font-size-adjust: 0.495;
}
.adjusted-c {
  font-size-adjust: 0.6;
}

正如下面 demo 所示，font-size-adjust 的值越大则字母会显得越大，反之则越小，当该值等于纵横比时，每组字母的尺寸都相等。

在网站上使用 font-size-adjust

以下 demo 使用的 font-size-adjust 取值于上一个 CodePen demo 中为 ‘Lato’ 字体设置的值，现在将会用来调整 ‘Verdana’ 这个候选字体。会有一个按钮控制修改是否发生，所以你可以看出修改前后的变化：

当你处理大量文字时效果会更加引人注目，然而上面的例子应该足够让你认识到这个属性的有用之处。

浏览器支持

目前，只有 Firefox 默认支持 font-size-adjust 属性。Chrome 和 Opera 分别从 43 和 30 版本开始作为试验特性予以支持，开发者需前往 chrome://flags 中开启 “Experimental Web Platform Features” 选项。Edge 和 Safari 不支持这个属性。

如果你决定使用这个属性，低版本浏览器的支持将不成问题，这个属性被设计时就已经考虑到向后兼容性，不支持的浏览器会正常的显示文本，支持的浏览器则会基于该属性的值调整字体大小。

总结

读完这篇文章后，你应该知道 font-size-adjust 属性是什么，为什么它很重要以及如何计算出不同字体的纵横比。

因为 font-size-adjust 在旧浏览器中优雅降级，你今天就可以直接应用该属性到你的生产环境中，以便提高页面文字易读性。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

css3文字渐变动画

css3做出半圆弧线

以上がfont-size-adjust 属性が Web ページのレイアウトを最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。