バージョン: v8

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

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

試してみる

ヒント

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

Android版Chromeでテストする場合は、「アクセシビリティページのズーム」が有効になっていることを確認してください。

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

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

アプリケーションでの有効化

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

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

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

注意すべき点の1つは、コンポーネントの寸法が大きなフォントサイズに対応するために変更が必要になる場合があるということです。たとえば、widthおよびheightプロパティは、それぞれmin-widthおよびmin-heightに変更する必要がある場合があります。開発者は、長さの値を使用するCSSプロパティについてアプリケーションを監査し、pxからremへの適切な変換を行う必要があります。また、テキストが大きくなっても読みやすくするために、長いテキストを切り捨てるのではなく、次の行に折り返すことをお勧めします。

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

Ionicのデフォルトフォントは、あらゆるサイズで見栄えが良く、他のモバイルアプリとの一貫性を確保するように設計されているため、デフォルトフォントを使用することをお勧めします。ただし、開発者はCSSを使用して、ダイナミックフォントスケーリングでカスタムフォントファミリーを使用できます。

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

`em`単位と`rem`単位の比較

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

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

次の例では、.childの計算されたフォントサイズは、.parentの子であるため、40pxになります（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>

親要素は20px

子要素は40px

子要素は80px

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

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

.parent {
  font-size: 20px;
}

.child {
  font-size: 2rem;
}

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

フォントサイズを定義し、ダイナミックフォントスケーリングに参加するIonicコンポーネントは、通常、rem単位を使用します。これにより、各コンポーネントのテキストサイズは、ルート要素（通常はhtml要素）のフォントサイズを基準にしてサイズ設定されます。つまり、ルート要素のフォントサイズが変化すると、すべてのIonicコンポーネントのテキストが均一に拡大縮小します。これにより、各コンポーネントのフォントサイズを手動で上書きする必要がなくなります。これらのコンポーネント内のアイコンなどの一部の要素は、要素がテキストを基準にサイズ設定されるように、代わりにem単位を使用しますが、テキスト自体はrem単位を使用してサイズ設定されます。

iOS

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

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

アプリがiosモードの場合、IonicはAppleのヒューマンインターフェースガイドライン（タイポグラフィ）に従います。その結果、テキストサイズが変更されると、重要なコンテンツが優先されます。これは、いくつかのことを意味します。

ion-headerまたはion-footerのコンテンツには、ion-contentのコンテンツ（ion-headerおよびion-footerのコンテンツよりも重要と見なされる）を優先するために、最大のフォントサイズが設定されます。
ion-badgeやion-back-buttonなどのコンポーネントには、読みやすいように最小フォントサイズが設定されます。
ion-tab-barやion-pickerなどのコンポーネントのテキストは、Appleのヒューマンインターフェースガイドラインに従って、ダイナミックフォントスケーリングには参加しません。

Android Web View

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

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

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

ルート要素のデフォルトのフォントサイズが16pxで、システムレベルのフォントスケールが1.5（つまり、テキストサイズが50％増加する必要がある）の場合、1remは24pxと評価されます。なぜなら、16 * 1.5 = 24だからです。

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

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

Android版Chrome

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

開発者は、chrome://flagsで実験的な「アクセシビリティページズーム」機能を有効にすることで、この動作をテストできます。

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

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

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

たとえば、iosモードは、Appleのタイポグラフィに関するヒューマンインターフェースガイドラインに従うために、最大および最小フォントサイズを利用します。mdモードは、マテリアルデザインには同じガイダンスがないため、この同じ動作を実装していません。つまり、iOSデバイスでmdモードを使用すると、ヘッダーやフッターで非常に大きなフォントサイズが許可される可能性があります。

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

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

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

iOS

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

詳細については、Appleサポートを参照してください。

Android

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

情報

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

トラブルシューティング

動的フォントスケーリングが機能しない

動的フォントスケーリングがアプリに影響を与えない理由はいくつか考えられます。次のリストは、網羅的ではありませんが、動的フォントスケーリングが機能しない理由をデバッグするために確認するべき項目をいくつか示しています。

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

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

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

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

動的フォントスケーリングが無効になっている場合でも、フォントサイズが大きい/小さい

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

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

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

動的フォントスケーリングを有効にしたときに、iOS上のIonicアプリのテキストサイズが変わった

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

情報

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

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

試してみる​

ダイナミックフォントスケーリングの使用​

アプリケーションでの有効化​

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

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

em単位とrem単位の比較​

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

iOS​

Android Web View​

Android版Chrome​

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

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