1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
---
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><feature-tag-value></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("<string>")}} 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>
|
