就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. CSS
  3. font-size

在此页

font-size CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative <length> units, such as em , ex , and so forth.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

句法 

/* <absolute-size> values */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;
/* <relative-size> values */
font-size: smaller;
font-size: larger;
/* <length> values */
font-size: 12px;
font-size: 0.8em;
/* <percentage> values */
font-size: 80%;
/* Global values */
font-size: inherit;
font-size: initial;
font-size: unset;

font-size property is specified in one of the following ways:

值

xx-small , x-small , small , medium , large , x-large , xx-large , xxx-large
Absolute-size keywords, based on the user's default font size (which is medium ).
larger , smaller

Relative-size keywords. The font will be larger or smaller relative to the parent element's font size, roughly by the ratio used to separate the absolute-size keywords above.

<length>

正值 <length> value. For most font-relative units (such as em and ex ), the font size is relative to the parent element's font size.

For font-relative units that are root-based (such as rem ), the font size is relative to the size of the font used by the <html> (root) element.

<percentage>

正值 <percentage> value, relative to the parent element's font size.

注意： To maximize accessibility, it is generally best to use values that are relative to the user's default font size.

描述

There are several ways to specify the font size, including with keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs for the particular web page.

关键词

Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the <body> element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.

像素

Setting the font size in pixel values ( px ) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.

Font sizing settings can also be used in combination. For example, if a parent element is set to 16px and its child element is set to larger , the child element displays larger than the parent element in the page.

注意： Defining font sizes in px is not accessible , because the user cannot change the font size in some browsers. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer. Avoid using them for font sizes if you wish to create an inclusive design.

Ems

Another way of setting the font size is with em values. The size of an em value is dynamic. When defining the font-size property, an em is equal to the font size of the element on which the em is used. If you haven't set the font size anywhere on the page, then it is the browser default, which is often 16px. So, by default 1em = 16px, and 2em = 32px. If you set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.

In order to calculate the em equivalent for any pixel value required, you can use this formula: 

em = desired element pixel value / parent element font-size in pixels

For example, suppose the font-size of the body of the page is set to 16px. If the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).

The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.

em and ex units on the font-size property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). This means em units and percentages do the same thing for font-size .

One important fact to keep in mind: em values compound. Take the following HTML and CSS: 

html {
  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
}
span {
  font-size: 1.6em;
}
					
<div>
<span>Outer <span>inner</span> outer</span>
</div>

The result is:

Assuming that the browser's default font-size is 16px, the words “outer” would be rendered at 16px, but the word “inner” would be rendered at 25.6px. This is because the inner <span> 's font-size is 1.6em which is relative to its parent's font-size , which is in turn relative to its parent's font-size . This is often called compounding .

Rems

rem values were invented in order to sidestep the compounding problem. rem values are relative to the root html element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.

The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to rem . 

html {
  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
}
span {
  font-size: 1.6rem;
}

Then we apply this CSS to the same HTML, which looks like this: 

<span>Outer <span>inner</span> outer</span>

In this example, the words “outer inner outer” are all displayed at 16px (assuming that the browser's font-size has been left at the default value of 10px).

形式定义

初始值 medium
适用于 所有元素。它还适用于 ::first-letter and ::first-line .
继承 yes
百分比 refer to the parent element's font size
计算值 as specified, but with relative lengths converted into absolute lengths
动画类型 a length

形式句法 

<absolute-size> | <relative-size> | <length-percentage>
where 
<absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large
<relative-size> = larger | smaller
<length-percentage> = <length> | <percentage>

范例

设置字体大小

CSS 

.small {
  font-size: xx-small;
}
.larger {
  font-size: larger;
}
.point {
  font-size: 24pt;
}
.percent {
  font-size: 200%;
}

HTML 

<h1 class="small">Small H1</h1>
<h1 class="larger">Larger H1</h1>
<h1 class="point">24 point H1</h1>
<h1 class="percent">200% H1</h1>

结果

规范

规范 状态 注释
CSS Fonts Module Level 4
The definition of 'font-size' in that specification. 		工作草案 添加 xxx-large 关键词。
CSS Fonts Module Level 3
The definition of 'font-size' in that specification. 		候选推荐 无变化。
CSS Level 2 (Revision 1)
The definition of 'font-size' in that specification. 		推荐 无变化。
CSS Level 1
The definition of 'font-size' in that specification. 		推荐 初始定义。

浏览器兼容性

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 Chrome 完整支持 1 Edge 完整支持 12 Firefox 完整支持 1 IE 完整支持 5.5 Opera 完整支持 7 Safari 完整支持 1 WebView Android 完整支持 1 Chrome Android 完整支持 18 Firefox Android 完整支持 4 Opera Android 完整支持 10.1 Safari iOS 完整支持 1 Samsung Internet Android 完整支持 1.0
rem 值 Chrome 完整支持 31 Edge 完整支持 12 Firefox 完整支持 31 注意事项
完整支持 31 注意事项
注意事项 Before Firefox 57, animations using em units are not affected by changes to the font-size of the animated element's parent ( bug 1254424 ).
注意事项 Before Firefox 57, some language settings' inherited font-size is smaller than expected ( bug 1391341 ).
IE 完整支持 11
完整支持 11
不支持 9 — 10
Opera 完整支持 28 Safari 完整支持 7 WebView Android 完整支持 4.1 Chrome Android 完整支持 42 Firefox Android 完整支持 31 Opera Android 完整支持 28 Safari iOS 完整支持 7 Samsung Internet Android 完整支持 4.0
xxx-large keyword Chrome 完整支持 79 Edge 完整支持 79 Firefox 完整支持 70 IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 完整支持 79 Chrome Android 完整支持 79 Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 完整支持 12.0

图例

完整支持

完整支持

不支持

不支持

见实现注意事项。

见实现注意事项。

元数据

  • 最后修改：
  1. CSS
  2. CSS 参考
  3. CSS 字体
  4. 指南
    1. OpenType font features guide
    2. Variable fonts guide
  5. At-Rules
    1. @font-face
    2. @font-feature-values
  6. 特性
    1. font
    2. font-family
    3. font-feature-settings
    4. font-kerning
    5. font-language-override
    6. font-optical-sizing
    7. font-size
    8. font-size-adjust
    9. font-smooth
    10. font-stretch
    11. font-style
    12. font-synthesis
    13. font-variant
    14. font-variant-alternates
    15. font-variant-caps
    16. font-variant-east-asian
    17. font-variant-ligatures
    18. font-variant-numeric
    19. font-variant-position
    20. font-variation-settings
    21. font-weight
    22. line-height
    23. line-height-step