font-size-adjust

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
相关话题

font-size-adjust CSS property sets the size of lower-case letters relative to the current font size (which defines the size of upper-case letters).

/* 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;

The property is useful since the legibility of fonts, especially at small sizes, is determined more by the size of lowercase letters than by the size of capital letters. Legibility can become an issue when the first-choice font-family is unavailable and its replacement has a significantly different aspect ratio (the ratio of the size of lowercase letters to the size of the font).

To use this property in a way that is compatible with browsers that do not support font-size-adjust , it is specified as a number that the font-size property is multiplied by. This means the value specified for the property should generally be the aspect ratio of the first choice font. For example, a style sheet that specifies:

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

... is really specifying that the lowercase letters of the font should be 7px high (0.5 × 14px). This will still produce reasonable results in browsers that do not support font-size-adjust , where a 14px font will be used.

句法

值

none: Choose the size of the font based only on the font-size 特性。
<number>

形式定义

初始值	`none`
适用于	所有元素。它还适用于 `::first-letter` and `::first-line` .
继承	yes
计算值	如指定
动画类型	a number

形式句法

none | <number>

范例

Adjusting lower-case letter sizes

HTML

<p class="times">This text uses the Times font (10px), which is hard to read in small sizes.</p>
<p class="verdana">This text uses the Verdana font (10px), which has relatively large lowercase letters.</p>
<p class="adjtimes">This is the 10px Times, but now adjusted to the same aspect ratio as the Verdana.</p>

CSS

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

Results

规范

规范	状态	注释
CSS Fonts Module Level 3 The definition of 'font-size-adjust' in that specification.	候选推荐	初始定义

The CSS property font-size-adjust was initially defined in CSS 2, but dropped in CSS 2.1. It has been newly defined in CSS 3.

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`font-size-adjust`	Chrome 完整支持 43 Disabled 完整支持 43 Disabled Disabled From version 43: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Edge 完整支持 79 Disabled 完整支持 79 Disabled Disabled From version 79: this feature is behind the `Enable experimental Web Platform features` preference.	Firefox 完整支持 40 完整支持 40 完整支持 3 注意事项注意事项 Before Firefox 40, `font-size-adjust: 0` was incorrectly interpreted as `font-size-adjust: none` ( bug 1144885 ). 完整支持 1 注意事项注意事项 Before Firefox 3, `font-size-adjust` was supported on Windows only.	IE 不支持 No	Opera 完整支持 30 Disabled 完整支持 30 Disabled Disabled From version 30: this feature is behind the `Enable experimental Web Platform features` preference.	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 完整支持 43 Disabled 完整支持 43 Disabled Disabled From version 43: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android 完整支持 4	Opera Android 完整支持 30 Disabled 完整支持 30 Disabled Disabled From version 30: this feature is behind the `Enable experimental Web Platform features` preference.	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持
不支持
见实现注意事项。
用户必须明确启用此特征。

元数据

最后修改： 2020 年 7 月 17 日

CSS
CSS 参考
CSS 字体
指南
1. OpenType font features guide
2. Variable fonts guide
At-Rules
1. @font-face
2. @font-feature-values
特性

在此页

句法

值