diff options
| -rw-r--r-- | files/ja/web/css/font-variant-alternates/index.html | 126 | ||||
| -rw-r--r-- | files/ja/web/css/font-variant-alternates/index.md | 124 |
2 files changed, 124 insertions, 126 deletions
diff --git a/files/ja/web/css/font-variant-alternates/index.html b/files/ja/web/css/font-variant-alternates/index.html deleted file mode 100644 index 19abc10c3d..0000000000 --- a/files/ja/web/css/font-variant-alternates/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: font-variant-alternates -slug: Web/CSS/font-variant-alternates -tags: - - CSS - - CSS Fonts - - CSS Property - - Reference -translation_of: Web/CSS/font-variant-alternates ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>font-variant-alternates</code></strong>CSSプロパティは代替グリフの使用を制御します。代替グリフは{{cssxref("@font-feature-values")}}で定義された代替名で参照される可能性があります。</span></p> - -<pre class="brush:css no-line-numbers">/* 予約語 */ -font-variant-alternates: normal; -font-variant-alternates: historical-forms; - -/* 函数表記値 */ -font-variant-alternates: stylistic(user-defined-ident); -font-variant-alternates: styleset(user-defined-ident); -font-variant-alternates: character-variant(user-defined-ident); -font-variant-alternates: swash(user-defined-ident); -font-variant-alternates: ornaments(user-defined-ident); -font-variant-alternates: annotation(user-defined-ident); -font-variant-alternates: swash(ident1) annotation(ident2); - -/* 大域値 */ -font-variant-alternates: initial; -font-variant-alternates: inherit; -font-variant-alternates: unset; -</pre> - -<p>{{cssxref("@font-feature-values")}}@規則は，OpenType機能と関連付けられた代替グリフ函数（<code>stylistic</code>，<code>styleset</code>，<code>character-variant</code>，<code>swash</code>，<code>ornament</code>，又は<code>annotation</code>）用の名前を定義できます。本プロパティを用いて，（{{cssxref("@font-feature-values")}}で定義された）対人可読な名前をスタイルシートで使うことができます。</p> - -<p>{{cssinfo}}</p> - -<h2 id="書式">書式</h2> - -<p>本プロパティは二つの形式の内一方を取ります:</p> - -<ul> - <li>予約語<code>normal</code></li> - <li>一又は複数の後掲した他の予約語及び函数（空白区切り・順不同）</li> -</ul> - -<h3 id="値">値</h3> - -<dl> - <dt><code>normal</code></dt> - <dd>この予約語は代替グリフを無効にします。</dd> - <dt><code>historical-forms</code></dt> - <dd>この予約語は歴史的形式――過去には一般的だったけれども今日そうではないグリフ――を有効にします。OpenTypeの<code>hist</code>機能タグに相当します。</dd> - <dt><code><a name="stylistic()"></a>stylistic()</code></dt> - <dd>この函数は個々の文字に対する様式的代替 (stylistic alternates) を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>salt</code>機能タグ（例: <code>salt 2</code>）に相当します。</dd> - <dt><code><a name="styleset()"></a>styleset()</code></dt> - <dd>この函数は一連の文字に対する様式的代替を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>ssXY</code>機能タグ（例: <code>ss02</code>）に相当します。</dd> - <dt><code><a name="character-variant()"></a>character-variant()</code></dt> - <dd>この函数は文字に対する様式的代替を有効にします。<code>styleset()</code>に似ていますが，一連の文字に対して一貫したグリフを作成せず，個々の文字が持つ様式は独立しており整合する必要はありません。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>cvXY</code>機能タグ（例: <code>cv02</code>）に相当します。</dd> - <dt><code><a name="swash()"></a>swash()</code></dt> - <dd>この函数は<a href="https://en.wikipedia.org/wiki/Swash_%28typography%29">先端装飾</a>〔訳注: グリフの先端を流線的に延長する装飾。<a href="http://www.fishtailstudio.com/others/gd201601.pdf#page=252">訳語参考</a>〕グリフを有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>swsh</code>及び<code>cswh</code>機能タグ（例: <code>swsh 2</code>及び<code>cswh 2</code>）に相当します。</dd> - <dt><code><a name="ornaments()"></a>ornaments()</code></dt> - <dd>この函数は<a href="https://ja.wikipedia.org/wiki/%E3%83%95%E3%83%AB%E3%83%BC%E3%83%AD%E3%83%B3">花形装飾活字</a>及び他の飾り文字グリフのような装飾を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>ornm</code>機能タグ（例: <code>ornm 2</code>）に相当します。 - <div class="note"><strong>注意:</strong> 文義を維持する目的で，フォント設計者は，箇条書き記号 (U+2022) の装飾的変形としてのUnicodeの飾り文字とマッチしないような装飾を含めるべきです。幾つかの既存のフォントがこの助言に従っていないことに留意して下さい。</div> - </dd> - <dt><code><a name="annotation()"></a>annotation()</code></dt> - <dd>この函数は丸数字又は鏡文字などの表記を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>nalt</code>機能タグ（例: <code>nalt 2</code>）に相当します。</dd> -</dl> - -<h3 id="形式文法">形式文法</h3> - -{{csssyntax}} - -<h2 id="例">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p>Firefox rocks!</p> -<p class="variant">Firefox rocks!</p> -</pre> - -<h3 id="CSS"><span class="pun">CSS</span></h3> - -<pre class="brush: css">@font-feature-values "Leitura Display Swashes" { - @swash { fancy: 1 } -} - -p { - font-size: 1.5rem; -} - -.variant { - font-family: Leitura Display Swashes; - font-variant-alternates: swash(fancy); -}</pre> - -<h3 id="結果">結果</h3> - -<div class="note"> -<p><strong>注意:</strong> この例を正しく閲覧するには，OpenTypeフォント<em>Leitura Display Swashes</em>を導入する必要があります。<a href="http://fontsgeek.com/fonts/Leitura-Display-Swashes">fontsgeek.com</a>等から試験目的の無償版が入手できます。</p> -</div> - -<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/font-variant-alternates') }}</p> - -<h2 id="仕様書">仕様書</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', '#propdef-font-variant-alternates', 'font-variant-alternates')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザ互換性</h2> - -<p>{{Compat("css.properties.font-variant-alternates")}}</p> diff --git a/files/ja/web/css/font-variant-alternates/index.md b/files/ja/web/css/font-variant-alternates/index.md new file mode 100644 index 0000000000..d2a89132cb --- /dev/null +++ b/files/ja/web/css/font-variant-alternates/index.md @@ -0,0 +1,124 @@ +--- +title: font-variant-alternates +slug: Web/CSS/font-variant-alternates +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - recipe:css-property +browser-compat: css.properties.font-variant-alternates +translation_of: Web/CSS/font-variant-alternates +--- +{{CSSRef}} + +**`font-variant-alternates`** は CSS のプロパティで、代替書体の使用を制御します。代替書体は {{cssxref("@font-feature-values")}} で定義された代替名で参照される可能性があります。 + +```css +/* キーワード値 */ +font-variant-alternates: normal; +font-variant-alternates: historical-forms; + +/* 関数表記値 */ +font-variant-alternates: stylistic(user-defined-ident); +font-variant-alternates: styleset(user-defined-ident); +font-variant-alternates: character-variant(user-defined-ident); +font-variant-alternates: swash(user-defined-ident); +font-variant-alternates: ornaments(user-defined-ident); +font-variant-alternates: annotation(user-defined-ident); +font-variant-alternates: swash(ident1) annotation(ident2); + +/* グローバル値 */ +font-variant-alternates: initial; +font-variant-alternates: inherit; +font-variant-alternates: revert; +font-variant-alternates: unset; +``` + +{{cssxref("@font-feature-values")}} アット規則は、代替書体関数 (`stylistic`, `styleset`, `character-variant`, `swash`, `ornament`, `annotation`) の名前を定義し、その名前を OpenType の引数と関連付けることができます。このプロパティはスタイルシート内で ({{cssxref("@font-feature-values")}} で定義された) 人間が読める名前を利用できるようにします。 + +## 構文 + +このプロパティは二つの形式のうち一つを取ります。 + +- キーワード `normal` +- または、その他の下記のキーワードおよび関数を空白区切り、順不同で 1 つ以上 + +### 値 + +- `normal` + - : このキーワードは代替書体を無効にします。 +- `historical-forms` + - : このキーワードは歴史的形式 — 過去には一般的だったけれども今日そうではない書体を有効にします。 OpenType の `hist` の値に対応します。 +- `stylistic()` + - : この関数は、個々の文字に対して表現の変更を可能にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `salt` の値に相当します (例: `salt 2`)。 +- `styleset()` + - : この関数は、一連の文字に対するスタイルの代替を可能にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `ssXY` の値に相当します (例: `ss02`)。 +- `character-variant()` + - : この関数は、文字に対して特定のスタイルの選択肢を有効にします。 `styleset()` に似ていますが、一連の文字に対してまとまった書体を作成するわけではありませんので、個々の文字は独立した、整合が取れているとは限らないスタイルになります。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `cvXY` の値に相当します (例: `cv02`)。 +- `swash()` + - : この関数は、[先端装飾](https://en.wikipedia.org/wiki/Swash_%28typography%29)書体を有効にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `swsh` および `cswh` の値に相当します (例: `swsh 2` および `cswh 2`)。 +- `ornaments()` + + - : この関数は、[フルーロン](https://ja.wikipedia.org/wiki/%E3%83%95%E3%83%AB%E3%83%BC%E3%83%AD%E3%83%B3)およびその他の飾り書体などの装飾を有効にします。 OpenType の `ornm` の値に相当します (例: `ornm 2`)。 + + > **Note:** テキストの意味を保持するために、フォントデザイナーは、 Unicode のディングバット文字に一致しない装飾を、ビュレット文字 (U+2022) の装飾的な変種として含めるべきです。既存のフォントの中には、このアドバイスに従わないものもあるので注意が必要です。 + +- `annotation()` + - : この関数は、丸数字や鏡文字などの注釈表記を有効にします。この函数は丸数字又は鏡文字などの表記を有効にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `nalt` の値に相当します (例: `nalt 2`)。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +<h2 id="Examples">例</h2> + +### HTML + +```html +<p>Firefox rocks!</p> +<p class="variant">Firefox rocks!</p> +``` + +### CSS + +```css +@font-feature-values "Leitura Display Swashes" { + @swash { fancy: 1 } +} + +p { + font-size: 1.5rem; +} + +.variant { + font-family: Leitura Display Swashes; + font-variant-alternates: swash(fancy); +} +``` + +### 結果 + +> **Note:** この例を有効にするには、 OpenType フォントの _Leitura Display Swashes_ をインストールする必要があります。試験用途の無償版が、 [fontsgeek.com](https://fontsgeek.com/fonts/Leitura-Display-Swashes) などにあります。 + +{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/font-variant-alternates') }} + +## 仕様書 + +Not part of any standard. + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("font-variant")}} +- {{cssxref("font-variant-caps")}} +- {{cssxref("font-variant-east-asian")}} +- {{cssxref("font-variant-ligatures")}} +- {{cssxref("font-variant-numeric")}} |