---
title: font-smooth
slug: Web/CSS/font-smooth
translation_of: Web/CSS/font-smooth
---
<div>{{ CSSRef }} {{ Non-standard_header }}</div>

<p><strong><code>font-smooth</code></strong> <a href="/en/CSS" title="CSS">CSS</a> властивість контролює застосування антиалайзингу коли відбувається рендеринг шрифта.</p>

<table class="properties">
 <tbody>
  <tr>
   <td><strong>{{ Xref_cssinitial() }}</strong></td>
   <td><code>auto</code></td>
  </tr>
  <tr>
   <td><strong>Застосовується до</strong></td>
   <td>всіх елементів і згенерованого контенту</td>
  </tr>
  <tr>
   <td><strong>{{ Xref_cssinherited() }}</strong></td>
   <td>yes</td>
  </tr>
  <tr>
   <td><strong>Відсотки</strong></td>
   <td>відносно розмірів шрифта батьківського елемента</td>
  </tr>
  <tr>
   <td><strong>Media</strong></td>
   <td>{{ Xref_cssvisual() }}</td>
  </tr>
  <tr>
   <td><strong>{{ Xref_csscomputed() }}</strong></td>
   <td>як зазначено в специфікації</td>
  </tr>
 </tbody>
</table>

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

<pre class="brush:css">/* Keyword values */
font-smooth: auto;
font-smooth: never;
font-smooth: always;

/* &lt;length&gt; value */
font-smooth: 2em;
</pre>

<div class="note">
<p><strong>WebKit</strong> <span class="tlid-translation translation" lang="uk"><span title="">реалізує подібну властивість, але з різними значеннями</span></span>: <strong><code>-webkit-font-smoothing</code></strong>. <span class="tlid-translation translation" lang="uk"><span title="">Це працює тільки на</span></span> Mac OS X/macOS.</p>

<ul>
 <li><code>auto</code> - <span class="tlid-translation translation" lang="uk"><span title="">веб-переглядач працює в даному режимі за замовчуванням (Використовує субпіксель для згладжування, коли він доступний)</span></span></li>
 <li><code>none</code> - <span class="tlid-translation translation" lang="uk"><span title="">відсутність згладжування шрифту;</span> <span title="">відображення тексту з нерівними гострими краями.</span></span></li>
 <li><code>antialiased</code> - згладжує текст на піксельному рівні, на відміну від субпіксельного. Перехід від субпіксельного рендерингу до антиалайзингу для світлого тексту на темному тлі (бекграунді) робить жирність тексту (<code><strong>font-weight</strong></code>) меншою.</li>
 <li><code>subpixel-antialiased</code> - на більшості не Retina дисплеях, результатом буде найчіткіший текст.</li>
</ul>
</div>

<div class="note">
<p><strong>Firefox</strong> <span class="tlid-translation translation" lang="uk"><span title="">реалізує подібну властивість, але з різними значеннями</span></span>: <strong><code>-moz-osx-font-smoothing</code></strong>. Це працює тільки на Mac OS X/macOS.</p>

<ul>
 <li><code>auto</code> - <span class="tlid-translation translation" lang="uk"><span title="">дозволяє браузеру вибирати оптимізацію для вирівнювання шрифту, як правило</span></span> <code>grayscale</code>.</li>
 <li><code>grayscale</code> - рендер тексту з використанням відтінків сірого, на відміну від субпіксельного. Перехід від субпіксельного рендерингу до антиалайзингу для світлого тексту на темному тлі (бекграунді) робить жирність тексту (<code><strong>font-weight</strong></code>) меншою.</li>
</ul>
</div>

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

<p>В ранніх версіях згладжування (2002) шрифтів <a href="http://www.w3.org/TR/WD-font/#font-smooth">CSS3 Fonts було присутнє</a>, але на даний момент <code>font-smooth</code> його було видалено і ця специфікація не відповідає стандартам.</p>

<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>

<div class="hidden"><span class="tlid-translation translation" lang="uk"><span title="">Таблиця сумісності на цій сторінці формується із структурованих даних.</span> <span title="">Якщо ви хочете зробити свій внесок у дані, будь ласка, ознайомтесь</span></span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і відправте нам pull запит.</div>

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

<h2 id="Дивіться_також">Дивіться також</h2>

<ul>
 <li><a href="http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/">Please Stop "Fixing" Font Smoothing – UsabilityPost</a></li>
 <li><a href="https://www.zachleat.com/web/font-smooth/">Laissez-faire font smoothing and anti-aliasing</a></li>
</ul>