Version: v8

ダイナミックフォントスケーリング

ダイナミックフォントスケーリングは、ユーザーが画面上に表示されるテキストのサイズを選択できる機能です。これは、読みやすさのために大きなテキストが必要なユーザーを支援し、小さなテキストを読むことができるユーザーにも対応します。

試してみる

tip

Android、iOS、または iPadOS デバイスで試してください。

Android の Chrome でテストしている場合は、"Accessibility Page Zoom"が有効になっていることを確認してください。

デバイスでのフォントサイズの変更ガイドに従って、好みのフォントサイズを設定し、以下のデモのテキストが設定に応じて拡大または縮小するのを確認してください。

Ionic でダイナミックフォントスケーリングを有効にする

アプリケーションで有効にする

ダイナミックフォントスケーリングは、typography.css ファイルがインポートされている限り、デフォルトで有効になっています。このファイルをインポートすると --ion-dynamic-font 変数が定義され、ダイナミックフォントスケーリングが有効になります。推奨はされませんが、開発者はアプリケーションコード内でこの変数を initial に設定することでダイナミックフォントスケーリングを無効にすることもできます。

カスタムコンポーネントへの統合

開発者は、px 単位を使用している font-size 宣言を rem 単位に変更することで、カスタムコンポーネントをダイナミックフォントスケーリングに対応させることができます。px から rem へ変換する簡単な方法は、ピクセルのフォントサイズをブラウザのデフォルトフォントサイズ（通常は 16px）で割ることです。例えば、コンポーネントのフォントサイズが 14px の場合、14px / 16px = 0.875rem として rem に変換できます。また、フォントサイズを上書きしている Ionic コンポーネントがある場合も、rem 単位を使用するよう更新する必要があります。

もう一つ注意すべき点として、フォントサイズが大きくなった場合に対応できるよう、コンポーネントの寸法を変更する必要がある場合があります。例えば、width や height プロパティは、それぞれ min-width や min-height に変更する必要があるかもしれません。開発者は、length 値を使用している CSS プロパティがないかアプリケーション全体を確認し、必要に応じて px から rem への変換を行うべきです。また、大きなテキストでも読みやすくするため、長いテキストは途中で省略するのではなく次の行に折り返すことを推奨します。

カスタムフォントファミリー

Ionic のデフォルトフォントは、どのサイズでも見やすく設計されており、他のモバイルアプリとの一貫性も保たれるため、これらを使用することを推奨します。ただし、開発者は CSS を使用して Dynamic Font Scaling とともにカスタムフォントファミリーを利用することもできます:

html {
  --ion-dynamic-font: var(--ion-default-dynamic-font);
  --ion-font-family: 'Comic Sans MS';
}

`em`単位と`rem`単位

開発者は、相対フォントサイズに 2 つのオプションがあります：emとrem。

em単位は、要素のフォントサイズを親のフォントサイズを基準に設定します。

次の例では、.childの計算されたフォントサイズは40pxです。これは.parentの子であるためです（2em * 20px = 40px）。

.parent {
  font-size: 20px;
}

.child {
  font-size: 2em;
}

ただし、em単位には複合効果があり、問題を引き起こす可能性があります。次の例では、2 番目の.child要素の計算されたフォントサイズは80pxです。フォントサイズが複合されるためです。

<div class="parent">
  Parent element with 20px
  <div class="child">
    Child element with 40px
    <div class="child">Child element with 80px</div>
  </div>
</div>

Parent element with 20px

Child element with 40px

Child element with 80px

この複合効果により、ダイナミックフォントスケーリングで作業する際は、em単位の代わりにrem単位を使用することを強くお勧めします。rem単位は、要素のフォントサイズをルート要素（通常は<html>）のフォントサイズを基準に設定します。ルート要素のデフォルトフォントサイズは通常16pxです。

次の例では、.childの計算されたフォントサイズは32pxです。フォントサイズが.parentではなくhtmlを基準に計算されるためです。

.parent {
  font-size: 20px;
}

.child {
  font-size: 2rem;
}

Ionic でのダイナミックフォントスケーリングの仕組み

フォントサイズを定義し、ダイナミックフォントスケーリングに参加する Ionic コンポーネントは、通常rem 単位を使用します。これにより、各コンポーネント内のテキストがルート要素（通常はhtml要素）のフォントサイズを基準にサイズ設定されます。これは、ルート要素のフォントサイズが変更されると、すべての Ionic コンポーネント内のテキストが一貫した方法でスケールすることを意味します。これにより、各コンポーネントのフォントサイズを手動でオーバーライドする必要がなくなります。これらのコンポーネント内の一部の要素（アイコンなど）は、要素をテキストを基準にサイズ設定するためにem単位を使用しますが、テキスト自体はrem単位を使用してサイズ設定されます。

iOS

Ionic のダイナミックフォントスケーリングは、Dynamic Typeと呼ばれる iOS 機能の上に構築されています。これを行うために、Ionic はルート要素のfontを Apple 定義のテキストスタイルに設定します。一貫性のために、Ionic はbodyテキストスタイルを使用します。

Apple 定義のテキストスタイルを使用すると、Dynamic Type が有効になり、Ionic コンポーネント内のすべてのテキストがシステムレベルの設定に従ってスケールします。これらの Apple 定義フォントは Apple デバイスでのみ機能することに注意してください。その結果、アプリがiosモードを使用している場合でも、これらのフォントは Android デバイスでは機能しません。

Ionic は、アプリがiosモードの場合、Apple の Human Interface Guidelines for Typographyに従います。その結果、テキストサイズが変更されると、重要なコンテンツが優先されます。これは、いくつかのことを意味します：

ion-headerまたはion-footer内のコンテンツには最大フォントサイズが設定され、ion-headerとion-footer内のコンテンツよりも重要と見なされるion-content内のコンテンツが優先されます。
ion-badgeやion-back-buttonなどのコンポーネントには最小フォントサイズが設定され、読みやすさが保たれます。
ion-tab-barやion-pickerなどのコンポーネント内のテキストは、Apple の Human Interface Guidelines に従ってダイナミックフォントスケーリングに参加しません。

Android Web View

Android Web View のフォントスケーリングメカニズムは、Web コンテンツで常に有効になっており、px単位で定義されたフォントサイズを自動的にスケールします。これは、pxを使用して指定された最大または最小フォントサイズは、最終的なフォントサイズが指定された最大または最小フォントサイズと一致しない場合でも、スケールされることを意味します。

次の例では、min()関数を使用して、.fooのフォントサイズが14pxを超えないように指定しています。

.foo {
  font-size: min(1rem, 14px);
}

ルート要素のデフォルトフォントサイズが16pxで、システムレベルのフォントスケールが1.5（つまり、テキストサイズを 50%増やす）の場合、1remは16 * 1.5 = 24であるため、24pxと評価されます。

これは定義された最大値14pxより大きいため、.fooの評価されたフォントサイズは14pxであると想定されるかもしれません。ただし、Android Web View はpx単位で定義されたフォントサイズをスケールするため、min()関数で使用される14pxも 1.5 倍にスケールされます。

その結果、最大計算フォントサイズは実際には14 * 1.5 = 21であるため21pxとなり、したがって.fooの全体的な計算フォントサイズは21pxです。

Chrome for Android

Android の Chrome Web Browser は、Android Web View とは異なる動作をします。デフォルトでは、Chrome for Android はシステムレベルのフォントスケール設定を尊重しません。ただし、Chromium チームはこれを可能にする新機能に取り組んでいます。有効にすると、この機能はhtml要素のzoomレベルを変更し、テキストに加えてレイアウトのサイズも増加させます。

開発者は、chrome://flagsで実験的な「Accessibility Page Zoom」機能を有効にすることで、この動作をテストできます。

詳細については、https://bugs.chromium.org/p/chromium/issues/detail?id=645717を参照してください。

異なるプラットフォームでのモードの使用

各プラットフォームには、わずかに異なるフォントスケーリング動作があり、iosとmdモードは、それぞれのプラットフォームでのスケーリング動作を活用するように実装されています。

たとえば、iosモードは、Apple の Human Interface Guidelines for Typographyに従うために最大および最小フォントサイズを利用します。mdモードは、Material Design には同じガイダンスがないため、この同じ動作を実装していません。これは、iOS デバイスでmdモードを使用すると、ヘッダーとフッターで非常に大きなフォントサイズが許可される可能性があることを意味します。

その結果、ダイナミックフォントスケーリングを使用する場合は、iOS デバイスでiosモードを使用し、Android デバイスでmdモードを使用することを強くお勧めします。

デバイスでのフォントサイズの変更

フォントスケーリングの設定は、ユーザーがデバイスごとに設定します。これにより、ユーザーはこの動作をサポートするすべてのアプリケーションでフォントをスケールできます。このガイドでは、各プラットフォームでフォントスケーリングを有効にする方法を示します。

iOS

iOS でのフォントスケーリングは、設定アプリで設定できます。

詳細については、Apple Supportを参照してください。

Android

ユーザーがフォントスケーリング設定にアクセスする場所はデバイスによって異なりますが、通常は設定アプリの「アクセシビリティ」ページにあります。

info

Android の Chrome Web Browser には、システムレベルのフォントスケールを尊重する際にいくつかの制限があります。詳細については、Chrome for Androidを参照してください。

トラブルシューティング

ダイナミックフォントスケーリングが機能しない

ダイナミックフォントスケーリングがアプリに影響を与えない理由はいくつかあります。以下のリストは網羅的ではありませんが、ダイナミックフォントスケーリングが機能しない理由をデバッグするために確認すべきいくつかのことを提供します。

Ionic のバージョンがダイナミックフォントスケーリングをサポートしていることを確認してください。ダイナミックフォントスケーリングは、Ionic v7.5 から追加されました。
typography.cssファイルがインポートされていることを確認してください。このファイルは、ダイナミックフォントスケーリングが機能するために必要です。
コードがルート要素のデフォルトフォントサイズをオーバーライドしていないことを確認してください。ルート要素にフォントサイズを手動で設定すると、ダイナミックフォントスケーリングが意図したとおりに機能しなくなります。
コードが Ionic コンポーネントのフォントサイズをオーバーライドしていないことを確認してください。font-sizeルールを設定する Ionic コンポーネントはrem単位を使用します。ただし、アプリがそれをpxを使用するようにオーバーライドしている場合、そのカスタムルールをremを使用するように変換する必要があります。詳細については、カスタムコンポーネントの統合を参照してください。
Chrome for Android を使用している場合は、「Accessibility Page Zoom」が有効になっていることを確認してください。詳細については、Chrome for Androidを参照してください。

Android で最大および最小フォントサイズが尊重されない

Android Web View は、システムレベルのフォントスケール設定によってpx単位で定義されたフォントサイズをスケールします。これは、実際のフォントサイズがmin()、max()、またはclamp()で定義されたフォントサイズより大きいか小さい可能性があることを意味します。

詳細については、Android でのフォントスケーリングの仕組みを参照してください。

ダイナミックフォントスケーリングが無効でもフォントサイズが大きい/小さい

Ionic コンポーネントは、ダイナミックフォントスケーリングが無効になっている場合でも、rem 単位を使用してフォントサイズを定義します。これにより、各コンポーネント内のテキストがルート要素（通常はhtml要素）のフォントサイズを基準にサイズ設定されます。その結果、htmlのフォントサイズが変更されると、すべての Ionic コンポーネントの計算されたフォントサイズも変更されます。

スケールされた Ionic iOS コンポーネントのフォントサイズがネイティブ iOS の同等物と完全に一致しない

Action Sheet などの特定のネイティブ iOS コンポーネントは、Ionic がアクセスできないプライベートフォントスケールを使用します。ネイティブの動作にできるだけ近づけようとしていますが、一部のコンポーネントのテキストは、ネイティブの対応物よりわずかに大きくまたは小さくレンダリングされる場合があります。

iOS で Ionic アプリのテキストサイズがダイナミックフォントスケーリングを有効にしたときに変更された

ルート要素のデフォルトフォントサイズは通常16pxです。ただし、iOS デバイスでのダイナミックフォントスケーリングは、デフォルトフォントサイズが17pxの"Body"テキストスタイルを利用します。Ionic コンポーネント内のテキストはルート要素のフォントサイズを基準にスケールされるため、システムレベルのテキストスケールが変更されていなくても、ダイナミックフォントスケーリングを有効にすると一部のテキストが大きくなったり小さくなったりする場合があります。

info

iOS は、デフォルトフォントサイズが16pxの"Callout"テキストスタイルを提供します。ただし、このフォントスタイルは現在、Web コンテンツに公開されていません。詳細については、WebKit でサポートされているテキストスタイルを参照してください。

試してみる​

Ionic でダイナミックフォントスケーリングを有効にする​

アプリケーションで有効にする​

カスタムコンポーネントへの統合​

カスタムフォントファミリー​

em単位とrem単位​

Ionic でのダイナミックフォントスケーリングの仕組み​

iOS​

Android Web View​

Chrome for Android​

異なるプラットフォームでのモードの使用​

デバイスでのフォントサイズの変更​

iOS​

Android​

トラブルシューティング​

ダイナミックフォントスケーリングが機能しない​

Android で最大および最小フォントサイズが尊重されない​

ダイナミックフォントスケーリングが無効でもフォントサイズが大きい/小さい​

スケールされた Ionic iOS コンポーネントのフォントサイズがネイティブ iOS の同等物と完全に一致しない​

iOS で Ionic アプリのテキストサイズがダイナミックフォントスケーリングを有効にしたときに変更された​

Contents