---
title: font-feature-settings
slug: Web/CSS/font-feature-settings
tags:
  - CSS
  - CSS Fonts
  - CSS Property
  - Layout
  - Reference
  - Référence(2)
translation_of: Web/CSS/font-feature-settings
---
<div>{{CSSRef}} {{SeeCompatTable}}</div>

<h2 id="Zusammenfassung">Zusammenfassung</h2>

<p>Die Eigenschaft <code>font-feature-settings</code> ermöglicht die Kontrolle von erweiterten typografischen Eigenschaften in OpenType-Schriftarten.</p>

<div class="note"><strong>Anmerkung:</strong> Wenn möglich sollte die Eigenschaft {{cssxref("font-variant")}} genutzt werden. Diese Eigenschaft wurde speziell für Fälle entwickelt, in denen es nicht möglich ist, eine OpenType-Eigenschaft zu aktivieren oder zu nutzen.<br>
<br>
Diese Eigenschaft sollte insbesondere nicht genutzt werden, um Kapitälchen zu aktivieren.</div>

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

<h2 id="Syntax">Syntax</h2>

<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("font-feature-settings")}}
</pre>

<pre>font-feature-settings: normal
font-feature-settings: "smcp"
font-feature-settings: "smcp" on
font-feature-settings: "swsh" 2
font-feature-settings: "smcp", "swsh" 2

font-feature-settings: inherit
</pre>

<h3 id="Werte">Werte</h3>

<dl>
 <dt><code>normal</code></dt>
 <dd>Der Text wird mit Standardeinstellungen gesetzt.</dd>
 <dt><code>&lt;feature-tag-value&gt;</code></dt>
 <dd>Beim Rendern von Text wird die Liste der Tag-Wert-Paare an die Text-Layout-Engine übergeben um Eigenschaften zu aktivieren oder zu deaktivieren. Der Tag ist immer ein {{cssxref("&lt;string&gt;")}} aus 4 ASCII-Zeichen. Wenn eine andere Anzahl an Zeichen übergeben wird oder der Tag Zeichen außerhalb des Coderaumes von U+20 bis U+7E enthält, ist die komplette Eigenschaft ungültig.<br>
 Der Wert ist eine positive Ganzzahl, wobei die Schlüsselwörter <code>on</code> und <font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">off</span></font> entsprechend für <code>1</code> und <code>0</code> stehen.  Wenn kein Wert übergeben wird, wird standardmäßig von <code>1</code> ausgegangen. Für nicht-boolsche OpenType-Eigenschaften (z.B. <a href="http://www.microsoft.com/typography/otspec/features_pt.htm#salt">Alternative Stile</a>) selektiert der Wert ein bestimmtes Zeichen, während er für boolsche Eigenschaften einen Schalter darstellt.</dd>
</dl>

<h2 id="Beispiele">Beispiele</h2>

<pre class="brush:css">/* Kapitälchen aktivieren */
.smallcaps { font-feature-settings: "smcp" on; }

/* Groß- und Kleinbuchstaben zu Kapitälchen konvertieren (Zeichensetzung eingeschlossen) */
.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }

/* Historische Formen aktivieren */
.hist { font-feature-settings: "hist"; }

/* Verbreitete Ligaturen deaktivieren (standardmäßig eingeschaltet) */
.noligs { font-feature-settings: "liga" 0; }

/* Nichtproportionale Ziffern (monospace) aktivieren */
td.tabular { font-feature-settings: "tnum"; }

/* Automatische Brüche aktivieren */
.fractions { font-feature-settings: "frac"; }

/* Das zweite geschwungene Zeichen nutzen */
.swash { font-feature-settings: "swsh" 2; }

/* Alternativen Zeichensatz Nr.7 nutzen */
.fancystyle {
  font-family: Gabriola; /* Verfügbar ab Windows 7 und Mac OS */
  font-feature-settings: "ss07";
}
</pre>

<h2 id="Spezifikation">Spezifikation</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browserkompatibilität">Browserkompatibilität</h2>

{{Compat("css.properties.font-feature-settings")}}

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li><a href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf" title="http://www.fontfont.com/opentype/FF_OT_UserGuide_v2.pdf">FontFont OpenType User Guide (pdf)</a></li>
 <li><a href="http://www.microsoft.com/typography/otspec/featurelist.htm" title="http://www.microsoft.com/typography/otspec/featurelist.htm">OpenType Feature Tags</a> list</li>
 <li><a href="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx" title="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx">Using the whole font</a> (The -moz syntax is the old one. On Gecko, use the -ms syntax but with -moz).</li>
</ul>