From 917858acd763bfb1f5d1e794c4f3bf45d00f3666 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 6 Nov 2021 01:12:30 +0900 Subject: CSS Fonts の各プロパティを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/05 時点の英語版に同期 --- files/ja/web/css/font-variant-numeric/index.md | 163 ++++++++++--------------- 1 file changed, 65 insertions(+), 98 deletions(-) (limited to 'files/ja/web/css/font-variant-numeric/index.md') diff --git a/files/ja/web/css/font-variant-numeric/index.md b/files/ja/web/css/font-variant-numeric/index.md index 9421481409..0503261ad5 100644 --- a/files/ja/web/css/font-variant-numeric/index.md +++ b/files/ja/web/css/font-variant-numeric/index.md @@ -6,130 +6,97 @@ tags: - CSS フォント - CSS プロパティ - リファレンス + - recipe:css-property +browser-compat: css.properties.font-variant-numeric translation_of: Web/CSS/font-variant-numeric --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の font-variant-numeric プロパティは、数字、分数、序数記号の表記を制御するために使用します。

+**`font-variant-numeric`** は CSS のプロパティで、数字、分数、序数記号の表記を制御するために使用します。 -
{{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}}
+{{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}} - +## 構文 -

構文

- -
font-variant-numeric: normal;
+```css
+font-variant-numeric: normal;
 font-variant-numeric: ordinal;
 font-variant-numeric: slashed-zero;
-font-variant-numeric: lining-nums;         /* <numeric-figure-values> */
-font-variant-numeric: oldstyle-nums;       /* <numeric-figure-values> */
-font-variant-numeric: proportional-nums;   /* <numeric-spacing-values> */
-font-variant-numeric: tabular-nums;        /* <numeric-spacing-values> */
-font-variant-numeric: diagonal-fractions;  /* <numeric-fraction-values> */
-font-variant-numeric: stacked-fractions;   /* <numeric-fraction-values> */
+font-variant-numeric: lining-nums;         /*  */
+font-variant-numeric: oldstyle-nums;       /*  */
+font-variant-numeric: proportional-nums;   /*  */
+font-variant-numeric: tabular-nums;        /*  */
+font-variant-numeric: diagonal-fractions;  /*  */
+font-variant-numeric: stacked-fractions;   /*  */
 font-variant-numeric: oldstyle-nums stacked-fractions;
 
 /* グローバル値 */
 font-variant-numeric: inherit;
 font-variant-numeric: initial;
+font-variant-numeric: revert;
 font-variant-numeric: unset;
-
- -

このプロパティは二つの形のうちの一つを取ります。

- - - -

値

- -
-
normal
-
このキーワードは、別形式の表記の使用を無効にします。
-
ordinal
-
このキーワードは、序数記号に対して特別な表記を使用します。英語では 1st, 2nd, 3rd, 4th、イタリア語では 1a です。 OpenType の ordn の値に対応します。
-
slashed-zero
-
このキーワードは、スラッシュ付きの 0 を使用します。これは O と 0 を明確に区別する必要がある場合に便利です。 OpenType の zero の値に対応します。
-
<numeric-figure-values>
-
これらの値は、数字の形状を制御します。二つの値が利用できます。 -
    -
  • lining-nums は、全てをベースライン上に並べる表記を有効にします。 OpenType の lnum の値に対応します。
    • -
  • oldstyle-nums は、 3, 4, 7, 9 などいくつかの数字を下げる表記を有効にします。 OpenType の onum の値に対応します。
    • -
-
-
<numeric-spacing-values>
-
これらの値は、数字の表記の大きさを制御します。二つの値が利用できます。 -
    -
  • proportional-nums は、数字をすべて同じ大きさにしない表記を有効にします。 OpenType の pnum の値に対応します。
    • -
  • tabular-nums は、数字を同じ大きさにする表記を有効にし、表の中に配置しやすくします。 OpenType の tnum の値に対応します。
    • -
-
-
<numeric-fraction-values>
-
これらの値は、分数の表示に使う表記を制御します。二つの値が利用できます。 -
    -
  • diagonal-fractions は、分子と分母が小さめになり、スラッシュで区切られる表記を有効にします。 OpenType の frac の値に対応します。
    • -
  • stacked-fractions は、分子と分母が小さめになり、積み重ねられて水平線で区切られた表記を有効にします。 OpenType の afrc の値に対応します。
    • -
-
-
- -

形式文法

+``` -{{csssyntax}} +このプロパティは 2 つの形のうちの 1 つを取ります。 + +- キーワード値 `normal` +- 以下の一覧にあるその他の値を空白区切り、自由な順番で + +### 値 + +- `normal` + - : このキーワードは、別形式の表記の使用を無効にします。 +- `ordinal` + - : このキーワードは、序数記号に対して特別な表記を使用します。英語では 1st, 2nd, 3rd, 4th、イタリア語では 1a です。 OpenType の `ordn` の値に対応します。 +- `slashed-zero` + - : このキーワードは、スラッシュ付きの 0 を使用します。これは O と 0 を明確に区別する必要がある場合に便利です。 OpenType の `zero` の値に対応します。 +- _\ + + - : これらの値は、数字の形状を制御します。2 つの値が利用できます。 + + - `lining-nums` は、全てをベースライン上に並べる表記を有効にします。 OpenType の `lnum` の値に対応します。 + - `oldstyle-nums` は、 3, 4, 7, 9 などいくつかの数字を下げる表記を有効にします。 OpenType の `onum` の値に対応します。 -

例

+- _\ -

HTML

+ - : これらの値は、数字の表記の大きさを制御します。2 つの値が利用できます。 -
<p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>
+ - `proportional-nums` は、数字をすべて同じ大きさにしない表記を有効にします。 OpenType の `pnum` の値に対応します。 + - `tabular-nums` は、数字を同じ大きさにする表記を有効にし、表の中に配置しやすくします。 OpenType の `tnum` の値に対応します。 -

CSS

+- _\ -
/*
-This example uses the Source Sans Pro OpenType font, developed by Adobe
-and used here under the terms of the SIL Open Font License, Version 1.1:
-http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
-*/
+  - : これらの値は、分数の表示に使う表記を制御します。2 つの値が利用できます。
+
+    - `diagonal-fractions` は、分子と分母が小さめになり、スラッシュで区切られる表記を有効にします。 OpenType の `frac` の値に対応します。
+    - `stacked-fractions` は、分子と分母が小さめになり、積み重ねられて水平線で区切られた表記を有効にします。 OpenType の `afrc` の値に対応します。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
+
+{{csssyntax}}
 
-@font-face {
-  font-family: "Source Sans Pro";
-  font-style: normal;
-  font-weight: 400;
-  src: url("https://mdn.mozillademos.org/files/15757/SourceSansPro-Regular.otf") format("opentype");
-}
+## 例
 
-.ordinal {
-  font-variant-numeric: ordinal;
-  font-family: "Source Sans Pro";
-}
-
+### 序数形式の設定 -

結果

+{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-example.html", '100%', 600)}} -

{{EmbedLiveSample('Examples')}}

+## 仕様書 -

仕様書

+{{Specifications}} - - - - - - - - - - - - - - - -
仕様書状況備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant-numeric', 'font-variant-numeric')}}{{Spec2('CSS3 Fonts')}}初回定義
+## ブラウザーの互換性 -

{{cssinfo}}

+{{Compat}} -

ブラウザーの対応

+## 関連情報 -

{{Compat("css.properties.font-variant-numeric")}}

+- {{cssxref("font-variant-alternates")}} +- {{cssxref("font-variant-caps")}} +- {{cssxref("font-variant-east-asian")}} +- {{cssxref("font-variant-ligatures")}} +- {{cssxref("font-variant")}} -- cgit v1.2.3-54-g00ecf