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-kerning/index.md | 129 ++++++++++++++++----------------- 1 file changed, 62 insertions(+), 67 deletions(-) (limited to 'files/ja/web/css/font-kerning') diff --git a/files/ja/web/css/font-kerning/index.md b/files/ja/web/css/font-kerning/index.md index 7d61cd8165..28f7c9a06a 100644 --- a/files/ja/web/css/font-kerning/index.md +++ b/files/ja/web/css/font-kerning/index.md @@ -5,14 +5,26 @@ tags: - CSS - CSS フォント - CSS プロパティ - - Reference + - リファレンス + - recipe:css-property +browser-compat: css.properties.font-kerning translation_of: Web/CSS/font-kerning --- -
{{CSSRef}}
+{{CSSRef}} -

font-kerning CSS プロパティはフォントに存在するカーニング情報の使用方法を制御します。

+**`font-kerning`** CSS プロパティはフォントに存在するカーニング情報の使用を制御します。 -
/* キーワード値 */
+{{EmbedInteractiveExample("pages/css/font-kerning.html")}}
+
+*カーニング*は、文字の間隔をどれだけ取るかを定義します。_well-kerned_ フォントでは、この機能は文字間を他と比較してより整った読みやすい間隔にします。
+
+例えば、下の画像では、左の例ではカーニングが使われていませんが、右の例ではカーニングが使われています。
+
+![font-kerning の例](font-kerning.png)
+
+## 構文
+
+```css
 font-kerning: auto;
 font-kerning: normal;
 font-kerning: none;
@@ -20,45 +32,43 @@ font-kerning: none;
 /* グローバル値 */
 font-kerning: inherit;
 font-kerning: initial;
+font-kerning: revert;
 font-kerning: unset;
-
+``` -

カーニングは、文字間にどれだけ間隔を置くかを制御します。カーニング情報はフォントに含まれており、かつフォントが well-kerned であれば、この機能によりどのような文字でも文字同士の間隔をほぼ同一にできます。

+### 値 -

Example of font-kerning

+- `auto` + - : このキーワードは、カーニングを使用するかをブラウザーに任せます。フォントサイズが小さい場合はカーニングが不自然になることがあるため、ブラウザーは無効化するでしょう。これは既定値です。 +- `normal` + - : このキーワードは、カーニングを適用するよう要求します。 +- `none` + - : このキーワードは、ブラウザーがフォントのカーニング情報を使用しないようにします。 -

{{cssinfo}}

+## 公式定義 -

構文

+{{cssinfo}} -

font-kerning プロパティは以下のキーワード内の一つを指定します。

- -

値

- -
-
auto
-
このキーワードは、カーニングを使用するかをブラウザーに任せます。フォントサイズが小さい場合はカーニングが不自然になることがあるため、ブラウザーは無効化するでしょう。これは既定値です。
-
normal
-
このキーワードは、カーニングを適用するよう要求します。
-
none
-
このキーワードは、ブラウザーがフォントのカーニング情報を使用しないようにします。
-
- -

形式文法

+## 形式定義 {{csssyntax}} -

例

+## 例 + +

カーニングの有無

-

HTML

+#### HTML -
<div id="kern"></div>
-<div id="nokern"></div>
-<textarea id="input">AV T. ij</textarea>
+```html +
+
+ +``` -

CSS

+#### CSS -
div {
+```css
+div {
   font-size: 2rem;
   font-family: serif;
 }
@@ -69,13 +79,15 @@ font-kerning: unset;
 
 #kern {
   font-kerning: normal;
-}
+} +``` -

JavaScript

+#### JavaScript -
var input  = document.getElementById('input'),
-    kern   = document.getElementById('kern'),
-    nokern = document.getElementById('nokern');
+```js
+let input  = document.getElementById('input');
+let kern   = document.getElementById('kern');
+let nokern = document.getElementById('nokern');
 
 input.addEventListener('keyup', function() {
   kern.textContent = input.value; /* Update content */
@@ -84,35 +96,18 @@ input.addEventListener('keyup', function() {
 
 kern.textContent = input.value; /* Initialize content */
 nokern.textContent = input.value;
-
- -

{{ EmbedLiveSample('Example') }}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-kerning', 'font-kerning')}}{{Spec2('CSS3 Fonts')}}初回定義
- -

ブラウザーの対応

- -

{{Compat("css.properties.font-kerning")}}

- -

関連情報

- - +``` + +{{ EmbedLiveSample('Enabling_and_disabling_kerning') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("font-variant")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-synthesis")}}, {{cssxref("letter-spacing")}} -- cgit v1.2.3-54-g00ecf