字体大小调整 | font-size-adjust

font-size-adjust

该font-size-adjustCSS属性指定字体大小应根据小写字母而不是大写字母的高度的高度来选择。这是有用的，因为字体的易读性，特别是在小尺寸的情况下，更多地由小写字母的大小决定，而不是由大写字母的大小确定。

/* Use the specified font size */
font-size-adjust: none;

/* Use a font size that makes lowercase
letters half the specified font size */
font-size-adjust: 0.5;

/* Global values */
font-size-adjust: inherit;
font-size-adjust: initial;
font-size-adjust: unset;

如果首选项font-family不可用，并且其替换具有显着不同的纵横比（小写字母大小与字体大小的比率），则可读性会成为问题。

要以与不支持的浏览器兼容的方式使用此属性font-size-adjust，它将指定为该font-size属性乘以的数字。这意味着为属性指定的值通常应该是第一种选择字体的宽高比。例如，指定一个样式表

font-size: 14px;  
font-size-adjust: 0.5;

真的字体的小写字母应该是7px高（0.5×14px）。

初始值	none
应用于	all elements. It also applies to ::first-letter and ::first-line.
是否继承	yes
媒体	visual
计算值	as specified
Animation type	a number
规范顺序	the unique non-ambiguous order defined by the formal grammar

语法

取值

none只根据font-size属性选择字体的大小。<number>

选择字体的大小，使其小写字母（由字体的x高度确定）是指定的数字乘以font-size。

指定的数字通常应该是第一选择的宽高比（x高度与字体大小的比率）font-family。这意味着，首选字体（如果可用）在浏览器中显示的大小相同，不管它们是否支持font-size-adjust。

0产生零高度的文本（隐藏文本）。请注意，一些旧的浏览器，如Firefox之前的版本40，0被视为none。

形式语法

none | <number>

实例

HTML

<p> CSS Examples: font-size-adjust</p>
<br>
<div class="times"> This is the Times font (10px) which is hard to read in small sizes</div>
<p>
<div class="verdana"> This is the Verdana font (10px) which does much better, since it is a sans - serif font.</div>
<br>
<p> Now we 'll do an adjustment:</p>
<p>
<div class="adjtimes"> and the 10px Times, adjusted to the same aspect ratio as the Verdana. Cool, eh?</div>

CSS

.times {
    font-family: Times, serif;
    font-size: 10px;
}

.verdana {
    font-family: Verdana, sans-serif;
    font-size: 10px;
}

.adjtimes {
    font-family: Times, sans-serif; 
    font-size-adjust: 0.58;
    font-size: 10px;
}

结果

规范

Specification	Status	Comment
CSS Fonts Module Level 3The definition of 'font-size-adjust' in that specification.	Candidate Recommendation	Initial definition

CSS属性font-size-adjust最初在CSS 2中定义，但在CSS 2.1中删除。它是CSS 3中新定义的。

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	43.02	(Yes)	1.0 (1.7 or earlier)1 3.0 (1.9)	No support	30.02	No support

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	?	(Yes)	1.0 (1.9.2)	?	?	?	?