path: root/files/zh-cn/web/css/font-size/index.html

---
title: font-size
slug: Web/CSS/font-size
tags:
  - font-size
translation_of: Web/CSS/font-size
---
<div>{{CSSRef}}</div>

<p><strong><code>font-size</code></strong> <a href="/zh-CN/docs/CSS" title="CSS">CSS</a> 属性指定字体的大小。因为该属性的值会被用于计算em和ex长度单位，定义该值可能改变其他元素的大小。</p>

<pre class="brush:css">/* &lt;absolute-size&gt;，绝对大小值 */
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;

/* &lt;relative-size&gt;，相对大小值 */
font-size: larger;
font-size: smaller;

/* &lt;length&gt;，长度值 */
font-size: 12px;
font-size: 0.8em;

/* &lt;percentage&gt;，百分比值 */
font-size: 80%;

font-size: inherit;
</pre>

<p>{{cssinfo}}</p>

<h2 id="Syntax" name="Syntax">语法</h2>

<p><strong>font-size</strong> 属性以两种方式之一指定：</p>

<ul>
 <li>作为一个从绝对大小<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-size$edit#absolute-size">absolute-size</a> 关键字列表或相对大小<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-size$edit#relative-size">relative-size</a> 关键字列表中选择的单个关键字。</li>
 <li>作为一个  <code><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-size$edit#&lt;length-percentage>">&lt;length-percentage&gt;</a></code> 值。</li>
</ul>

<h3 id="Values" name="Values">值</h3>

<dl>
 <dt><code>xx-small, x-small, small, medium, large, x-large, xx-large</code></dt>
 <dd>该套绝对大小关键字定义相对于用户的默认字体大小(medium)。与展示HTML的<code>&lt;font size="1"&gt;</code> 到<code>&lt;font size="7"&gt;（</code>用户默认字体大小<code>&lt;font size="3"&gt;）类似。</code></dd>
 <dt><code>larger, smaller</code></dt>
 <dd>比父元素的字体大或小，使用与上面的关键字的相近缩放比率。</dd>
 <dt><code>&lt;length&gt;</code><em> </em></dt>
 <dd>正数{{cssxref("&lt;length&gt;")}}.。当单位为<code>em<font face="Open Sans, sans-serif">或</font></code><code>ex时，大小为相对于父元素的文字的大小。例如，0.5em就是当前元素的父元素的字体大小的一半</code>。</dd>
 <dt><code>&lt;percentage&gt;</code></dt>
 <dd>父元素字体大小的正数{{cssxref("&lt;percentage&gt;")}}</dd>
</dl>

<p>最好使用用户默认字体大小的相对大小，避免使用除了<code>em<font face="Open Sans, sans-serif">或</font></code><code>ex的绝对大小单位。但是如果一定要使用绝对大小的话，px是众多单位中最好的选择，因为它的含义不会随着操作系统所认为的屏幕分辨率的大小</code><span style="font-family: consolas,monaco,andale mono,monospace;">（通常是不对的）</span><code>改变而改变。</code></p>

<h3 id="正式语法">正式语法</h3>

<pre class="syntaxbox">{{csssyntax("font-size")}}
</pre>

<h2 id="Possible_approaches" name="Possible_approaches">可用方法</h2>

<p>有多重定义字体大小的方法，包括了使用关键字及使用像素或em数字值。请根据网页的特定需求选择适用的方法。</p>

<h3 id="Keywords" name="Keywords">关键字</h3>

<p>关键字是定义网络字体大小的好方法。通过在body元素上定义关键字字体大小，你可以在网页的任何地方设置相对字体大小，这让你能轻易地缩放整个网页的字体大小。</p>

<h3 id="Pixels" name="Pixels">像素</h3>

<p>当你需要精确地像素时，用px设定字体大小是一种好方法。一像素的大小是固定的。这是一个不取决于平台的、跨浏览器的准确设置字体大小高度为你所想的像素大小的方法。因为不同浏览器为得到同样效果的算法可能不同，所以显示效果可能有微小的不同。</p>

<p>字体大小的设置也可以使用组合值。例如，如果父元素设定为16px而子元素设定为<code>larger</code>, 子元素显示的字体大小就会大于父元素。</p>

<div class="note"><strong>注意:</strong> 用像素字体定义使得字体大小不可由用户的浏览器改变。（例如，视力较低用户可能希望使用比网页设计师设定的字体大小大很多的字体）所以，如果你想创造能广泛使用的设计请避免使用像素设定字体。</div>

<h3 id="Ems" name="Ems">Em</h3>

<p>另一种方法是用<code>em</code>值设定字体大小。<code>em</code> 值的大小是动态的。当定义或继承font-size属性时，1em等于该元素的字体大小。如果你在网页中任何地方都没有设置文字大小的话，那它将等于浏览器默认文字大小，通常是16px。所以通常1em = 16px。2em = 32px。 如果你设置了body元素的字体大小为20px，那1em = 20px、2em = 40px。那个2就是当前em大小的倍数。</p>

<p>可用这个公式计算像素大小的等价em大小：</p>

<pre>em = 希望得到的像素大小 / 父元素字体像素大小</pre>

<p>例如，假设body的文字大小设为1em，且浏览器默认1em = 16px。如果你想得到12px，那你就可设定0.75em (because 12/16 = 0.75)。同样的，如果你想设定文字大小为10px，那就定义0.625em (10/16 = 0.625)；若想要22px就定义1.375em (22/16=1.375).</p>

<p>一个流行的技巧是设置body元素的字体大小为62.5% (即默认大小16px的62.5%)，等于10px。现在你可以通过计算基准大小10px的倍数，在任何元素上方便的使用em单位。这样有6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em。例如：</p>

<pre class="brush:css">body {
  font-size: 62.5%; /* font-size 1em = 10px */
}
p {
  font-size: 1.6em; /* 1.6em = 16px */
}</pre>

<p>因为em可以自动适应用户的字体，em是一个非常有用的CSS单位。</p>

<h2 id="Examples" name="Examples">示例</h2>

<h3 id="Example_1" name="Example_1">示例1</h3>

<pre class="brush: css">/* 设定段落文字大小为非常大 */
p { font-size: xx-large }

/* 设定一级标题的文字大小为2.5倍大小 */
h1 { font-size: 250% }

/* 设定span里的文字大小为16px */
span { font-size: 16px; }
</pre>

<h3 id="Example_2" name="Example_2">示例2</h3>

<pre class="brush: css">.small {
	font-size: xx-small;
}
.larger {
	font-size: larger;
}
.point {
	font-size: 24pt;
}
.percent {
	font-size: 200%;
}
</pre>

<pre class="brush: html">&lt;h1 class="small"&gt;Small H1&lt;/h1&gt;
&lt;h1 class="larger"&gt;Larger H1&lt;/h1&gt;
&lt;h1 class="point"&gt;24 point H1&lt;/h1&gt;
&lt;h1 class="percent"&gt;200% H1&lt;/h1&gt;
</pre>

<h4 id="Live_Sample">Live Sample</h4>

<p>{{EmbedLiveSample('Example_2','600','200')}}</p>

<h2 id="Notes" name="Notes">备注</h2>

<p>{{Cssxref("font-size")}}属性的<code style="font-style: normal;">em<font face="Open Sans, sans-serif">和</font></code><code style="font-style: normal;">ex</code>单位值相对于父元素的字体大小（不像其他属性，它们指的是相对当前元素的字体大小）。这意味对于{{Cssxref("font-size")}}属性来说，<code style="font-style: normal;">em单位</code>和百分比单位的作用是一样的。</p>

<h2 id="Specifications" name="Specifications">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td>No change.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Defines <code>font-size</code> as animatable.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>No change.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#font-size', 'font-size')}}</td>
   <td> </td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1")}}</td>
   <td>5.5</td>
   <td>7.0</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>1.0</td>
   <td>{{CompatGeckoMobile("1")}}</td>
   <td>6.0</td>
   <td>6.0</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>