File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -18,47 +18,19 @@ import DynamicFontScaling from '@site/static/usage/v8/layout/dynamic-font-scalin
1818
1919## Ionic でダイナミックフォントスケーリングを有効にする
2020
21- ::: info
22- この機能は現在、iOS ではオプトインです。ただし、Ionic 8 からデフォルトで有効になり、以下の CSS は不要になります。
23- :::
24-
25- ダイナミックフォントスケーリングは、Android ではデフォルトで既に有効になっています。開発者は、iOS で以下の手順を使用して有効にできます:
26-
27- 1 . [ typography.css] ( /docs/layout/global-stylesheets#typographycss ) ファイルがインポートされていることを確認します。
28- 2 . グローバルスタイルシートに以下の CSS を追加します:
29-
30- ``` css
31- html {
32- --ion-dynamic-font : var (--ion-default-dynamic-font );
33- }
34- ```
35-
36- ::: note
37- 内部では、Ionic は iOS デバイスでダイナミックフォントスケーリングを有効にするために以下の CSS を設定します:
38-
39- ``` css
40- html {
41- font : var (--ion-dynamic-font );
42- }
43- ```
44-
45- :::
46-
47- ## ダイナミックフォントスケーリングの使用
48-
4921### アプリケーションで有効にする
5022
51- [ typography.css] ( /docs/layout/global-stylesheets#typographycss ) ファイルがインポートされている限り、ダイナミックフォントスケーリングはデフォルトで有効になっています 。このファイルをインポートすると、 ` --ion-dynamic-font ` 変数が定義され、ダイナミックフォントスケーリングがアクティブになります。推奨されませんが、開発者はアプリケーションコードでこの変数を ` initial ` に設定することで、ダイナミックフォントスケーリングをオプトアウトできます 。
23+ ダイナミックフォントスケーリング は、 [ typography.css] ( /docs/layout/global-stylesheets#typographycss ) ファイルがインポートされている限り、デフォルトで有効になっています 。このファイルをインポートすると ` --ion-dynamic-font ` 変数が定義され、ダイナミックフォントスケーリング が有効になります。推奨はされませんが、開発者はアプリケーションコード内でこの変数を ` initial ` に設定することで ダイナミックフォントスケーリング を無効にすることもできます 。
5224
53- ### カスタムコンポーネントの統合
25+ ### カスタムコンポーネントへの統合
5426
55- 開発者は、カスタムコンポーネントを設定して、 ` px ` 単位を使用する ` font-size ` 宣言を[ rem 単位] ( https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths ) を使用するように変換することで、ダイナミックフォントスケーリングを活用できます 。` px ` から ` rem ` に変換する簡単な方法は、ピクセルフォントサイズをデフォルトのブラウザフォントサイズ (通常は` 16px ` )で割ることです。たとえば 、コンポーネントのフォントサイズが` 14px ` の場合、` 14px / 16px = 0.875rem ` として` rem ` に変換できます。また、フォントサイズがオーバーライドされた Ionic コンポーネントも 、` rem ` 単位を使用するように更新する必要があることに注意してください 。
27+ 開発者は、` px ` 単位を使用している ` font-size ` 宣言を [ rem 単位] ( https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths ) に変更することで、カスタムコンポーネントを ダイナミックフォントスケーリングに対応させることができます 。` px ` から ` rem ` へ変換する簡単な方法は、ピクセルのフォントサイズをブラウザのデフォルトフォントサイズ (通常は ` 16px ` )で割ることです。例えば 、コンポーネントのフォントサイズが ` 14px ` の場合、` 14px / 16px = 0.875rem ` として ` rem ` に変換できます。また、フォントサイズを上書きしている Ionic コンポーネントがある場合も 、` rem ` 単位を使用するよう更新する必要があります 。
5628
57- 考慮すべき点の 1 つは、コンポーネントの寸法が大きなフォントサイズに対応するために変更する必要がある場合があることです。たとえば 、` width ` と ` height ` プロパティをそれぞれ ` min-width ` と ` min-height ` に変更する必要がある場合があります 。開発者は、[ length 値] ( https://developer.mozilla.org/en-US/docs/Web/CSS/length ) を使用する CSS プロパティについてアプリケーションを監査し、 ` px ` から ` rem ` への適切な変換を行う必要があります 。また、大きなテキストを読みやすく保つために、長いテキストを切り詰めるのではなく、次の行に折り返すことをお勧めします 。
29+ もう一つ注意すべき点として、フォントサイズが大きくなった場合に対応できるよう、コンポーネントの寸法を変更する必要がある場合があります。例えば 、` width ` や ` height ` プロパティは、それぞれ ` min-width ` や ` min-height ` に変更する必要があるかもしれません 。開発者は、[ length 値] ( https://developer.mozilla.org/en-US/docs/Web/CSS/length ) を使用している CSS プロパティがないかアプリケーション全体を確認し、必要に応じて ` px ` から ` rem ` への変換を行うべきです 。また、大きなテキストでも読みやすくするため、長いテキストは途中で省略するのではなく次の行に折り返すことを推奨します 。
5830
5931### カスタムフォントファミリー
6032
61- Ionic のデフォルトフォントは、あらゆるサイズで見栄えが良く、他のモバイルアプリとの一貫性を確保するように設計されているため、使用することをお勧めします 。ただし、開発者は CSS を使用してダイナミックフォントスケーリングでカスタムフォントファミリーを使用できます:
33+ Ionic のデフォルトフォントは、どのサイズでも見やすく設計されており、他のモバイルアプリとの一貫性も保たれるため、これらを使用することを推奨します 。ただし、開発者は CSS を使用して Dynamic Font Scaling とともにカスタムフォントファミリーを利用することもできます:
6234
6335``` css
6436html {
You can’t perform that action at this time.
0 commit comments