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-optical-sizing/index.md | 112 +++++++++++++------------- 1 file changed, 57 insertions(+), 55 deletions(-) (limited to 'files/ja/web/css/font-optical-sizing/index.md') diff --git a/files/ja/web/css/font-optical-sizing/index.md b/files/ja/web/css/font-optical-sizing/index.md index 8893a42e18..d47271d488 100644 --- a/files/ja/web/css/font-optical-sizing/index.md +++ b/files/ja/web/css/font-optical-sizing/index.md @@ -5,53 +5,67 @@ tags: - CSS - CSS フォント - CSS プロパティ - - Reference + - NeedsExample + - リファレンス + - recipe:css-property +browser-compat: css.properties.font-optical-sizing translation_of: Web/CSS/font-optical-sizing --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の font-optical-sizing プロパティは、テキストの描画をそれぞれの大きさでの表示に最適化して表示するかどうかを設定します。これは光学的サイズバリエーション軸があるフォントのみで動作します。

+**`font-optical-sizing`** は [CSS](/ja/docs/Web/CSS) のプロパティで、テキストの描画をそれぞれの大きさでの表示に最適化して表示するかどうかを設定します。 -

例えば、小さいテキストは太い角と大きなセリフで描かれる傾向があるのに対し、大きなテキストは太い角と細い角の間のコントラストがもっと微妙に描画される傾向があります。

+{{EmbedInteractiveExample("pages/css/font-optical-sizing.html")}} -
-

メモ: 光学的サイズバリエーション軸は、 {{cssxref("font-variation-settings")}} の opsz で表現されます。

-
+## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 font-optical-sizing: none;
 font-optical-sizing: auto; /* default */
 
 /* グローバル値 */
 font-optical-sizing: inherit;
 font-optical-sizing: initial;
+font-optical-sizing: revert;
 font-optical-sizing: unset;
-
+``` + +### 値 + +- none + - : ブラウザーは表示の最適化のために書体の形を変更しません。 +- auto + - : ブラウザーは表示の最適化のために書体の形を変更します。 + +## 解説 -

値

+オプティカルサイズは、光学的サイズ変化軸を持つフォントに対して既定で有効になります。オプティカルサイズ変化軸は {{cssxref("font-variation-settings")}} の `opsz` で表されます。 -
-
none
-
ブラウザーは表示の最適化のために書体の形を変更しません。
-
auto
-
ブラウザーは表示の最適化のために書体の形を変更します。
-
+オプティカルサイジングを使用した場合、小さな文字サイズは太いストロークと大きなセリフで表現されることが多く、逆に大きな文字サイズは太いストロークと細いストロークのコントラストが強くなり、より繊細に表現されることが多くなります。 -

形式文法

+## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 -
<p class="optical-sizing">This paragraph is optically sized.
- This is the default across browsers.</p>
+### オプティカルサイズの変更を無効化
 
-<p class="no-optical-sizing">This paragraph is not optically sized.
- You should see a difference in supporting browsers.</p>
+```html +

This paragraph is optically sized. + This is the default across browsers.

-
@font-face {
+
This paragraph is not optically sized.
+ You should see a difference in supporting browsers.

+```
+
+```css
+@font-face {
     src: url('AmstelvarAlpha-VF.ttf');
     font-family:'Amstelvar';
     font-style: normal;
@@ -64,33 +78,21 @@ p {
 
 .no-optical-sizing {
   font-optical-sizing: none;
-}
- -
-

メモ: 上記で参照されているフォント — 光学的サイズを含みライセンスフリーであるもの — はテストに適しています。 GitHub からダウンロードできます。

-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-optical-sizing-def', 'font-optical-sizing')}}{{Spec2('CSS4 Fonts')}} 
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.font-optical-sizing")}}

+} +``` + +> **Note:** 上記で参照されているフォント — 光学的サイズを含みライセンスフリーであるもの — がテストに適しています。 [GitHub からダウンロード](https://github.com/TypeNetwork/Amstelvar/releases)できます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("font-size")}} +- {{cssxref("font-size-adjust")}} +- [基本的なテキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals) -- cgit v1.2.3-54-g00ecf