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

---
title: font-size
slug: Web/CSS/font-size
tags:
  - CSS
  - CSS-свойства
  - css шрифты
translation_of: Web/CSS/font-size
---
<div>{{CSSRef}}</div>

<h2 id="Описание">Описание</h2>

<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> Свойство <strong><code>font-size</code></strong> определяет размер шрифта. Это свойство также используется для вычисления размера<code> em</code>, <code>ex</code> и других относительных единиц. Подробнее: {{cssxref("&lt;length&gt;")}}.</p>

<p>{{EmbedInteractiveExample("pages/css/font-size.html")}}</p>

<h2 id="Syntax">Синтаксис</h2>

<pre class="brush:css">/* значения в &lt;абсолютных размерах&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;относительных размерах&gt; */
font-size: larger;
font-size: smaller;

/* &lt;значения длины&gt; */
font-size: 12px;
font-size: 0.8em;

/* &lt;процентные значения&gt; */
font-size: 80%;

/* Глобальные значения */
font-size: inherit;
font-size: initial;
font-size: unset;
</pre>

<p>Свойство <code>font-size</code> устанавливается одним из следующих способов:</p>

<ul>
 <li>Ключевым словом из перечня  <a href="https://developer.mozilla.org/ru/docs/Web/CSS/font-size$edit#absolute-size">абсолютных значений</a> или <a href="https://developer.mozilla.org/ru/docs/Web/CSS/font-size$edit#relative-size">относительных значений</a></li>
 <li>Как <code>&lt;значение длины&gt;</code> или <code>&lt;процентное значение&gt;</code>, по отношению к размеру родительского элемента.</li>
</ul>

<h3 id="Values">Значения</h3>

<dl>
 <dt><code>xx-small, x-small, small, medium, large, x-large, xx-large</code></dt>
 <dd>Набор ключевых слов абсолютных значений, по отношению к пользовательскому размеру шрифта по умолчанию (им считается <code>medium</code> - среднее).</dd>
 <dt><code>larger, smaller</code></dt>
 <dd>Больше (larger) или меньше (smaller). Ключевые слова для относительного размера. Шрифт будет больше или меньше по отношению в размеру шрифта родительского элемента.Примерно на такое же соотношение, которое используется в ключевых словах абсолютного размера выше.</dd>
 <dt>{{cssxref("&lt;length&gt;")}}</dt>
 <dd>
 <p>Положительное значение длины {{cssxref("&lt;length&gt;")}}. Для большинства единиц измерения, зависимых от шрифта (таких как <code>em</code> и <code>ex</code>), размер шрифта будет зависеть от размера шрифта родительских элементов.</p>

 <p>Для единиц измерения, зависимых от шрифта, которые зависят от корневых единиц (таких как <code>rem</code>), размер шрифта будет коррелироваться по отношению к шрифту, используемому корневым элементом  {{HTMLElement("html")}} (root).</p>
 </dd>
 <dt><code>&lt;процентные значения&gt;</code></dt>
 <dd>Положительное процентное {{cssxref("&lt;percentage&gt;")}} значение по отношению к размеру шрифта родительского элемента.</dd>
</dl>

<div class="note">
<p><strong>Примечание:</strong> Для обеспечения максимальной совместимости обычно лучше использовать значения, относящиеся к размеру шрифта пользователя по умолчанию.</p>
</div>

<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>

{{csssyntax}}

<h2 id="Possible_approaches">Возможные подходы</h2>

<p>Существуют разные способы задания размера шрифта. С помощью ключевых слов или с помощью числовых значений для размера пикселей или размера ems.  Выберите подходящий метод в зависимости от потребностей конкретной веб-страницы.</p>

<h3 id="Keywords">Ключевые слова</h3>

<p>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.</p>

<h3 id="Pixels">Pixels</h3>

<p>Setting the font size in pixel values (<code>px</code>) 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.</p>

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

<div class="note"><strong>Note:</strong> Defining font sizes in pixel is <em><a href="https://en.wikipedia.org/wiki/Web_accessibility">not accessible</a></em>, because the user cannot change the font size from the browser. (For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer.) Therefore, avoid using pixels for font sizes if you wish to create an inclusive design.</div>

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

<p>Another way of setting the font size is with <code>em</code> values. The size of an <code>em</code> value is dynamic. When defining the <code>font-size</code> property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is probably 16px. So, by default 1em = 16px, and 2em = 32px. If you set a <code>font-size</code> 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.</p>

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

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

<p>For example, suppose the font-size of the body of the page is set to 1em, with the browser standard of 1em = 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).</p>

<p>A popular technique to use throughout the document is to set the the font-size of the body to 62.5% (that is 62.5% of the default of 16px), which equates to 10px, or 0.625em. Now you can set the font-size for any elements using em units, with an easy-to-remember conversion, by dividing the px value by 10. This way 6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em. For example:</p>

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

<p>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.</p>

<p>One important fact to keep in mind:  em values compound. Take the following HTML and apply it with the previous CSS above:</p>

<pre class="brush: html">&lt;div&gt;
&lt;span&gt;Outer &lt;span&gt;inner&lt;/span&gt; outer&lt;/span&gt;
&lt;/div&gt;
</pre>

<p>The result is:</p>

<p>{{EmbedLiveSample("Ems", 400, 40)}}</p>

<p>Assuming that the browser's default <code>font-size</code> 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 <code>font-size</code> is 1.6 em which is relative to its parent's <code>font-size</code>, which is in turn relative to its parent's <code>font-size</code>. This is often called <strong>compounding</strong>.</p>

<h3 id="Rems">Rems</h3>

<p><code>rem</code> values were invented in order to sidestep the compounding problem. <code>rem</code> values are relative to the root <code>html</code> 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.</p>

<p>The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to <code>rem</code>.</p>

<pre class="brush: css">html {
  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
}
span {
  font-size: 1.6rem;
}
</pre>

<p>Then we apply this CSS to the same HTML, which looks like this:</p>

<pre class="brush: html">&lt;span&gt;Outer &lt;span&gt;inner&lt;/span&gt; outer&lt;/span&gt;</pre>

<p>{{EmbedLiveSample("Rems", 400, 40)}}</p>

<p>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 16px).</p>

<h2 id="Examples">Примеры</h2>

<h3 id="Example_1">Пример 1</h3>

<pre class="brush: css">/* Set paragraph text to be very large. */
p { font-size: xx-large }

/* Set h1 (level 1 heading) text to be 2.5 times the size
 * of the text around it. */
h1 { font-size: 250% }

/* Sets text enclosed within span tag to be 16px */
span { font-size: 16px; }
</pre>

<h3 id="Пример_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"><span>&lt;h1 class="small"&gt;Small H1&lt;/h1&gt;
&lt;h1 class="larger"&gt;Larger H1&lt;/h1&gt;</span>
<span>&lt;h1 class="point"&gt;24 point H1&lt;/h1&gt;
&lt;h1 class="percent"&gt;200% H1&lt;/h1&gt;</span></pre>

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

<p>{{EmbedLiveSample('Пример_2','600','200')}}</p>

<h2 id="Notes">Примечание</h2>

<p><code>em</code> and <code>ex</code> units on the {{Cssxref("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 <code>em</code> units and percentages do the same thing for {{Cssxref("font-size")}}.</p>

<h2 id="Specifications">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</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>{{Spec2('CSS1')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Совместимость браузеров</h2>

<p>{{Compat("css.properties.font-size")}}</p>