Jetpack Compose Glimmer のテキスト

対象となる XR デバイス

このガイダンスは、次のようなタイプの XR デバイス向けのエクスペリエンスを構築する際に役立ちます。

XR デバイスのタイプについて →

XR デバイスのタイプについて →

Jetpack Compose Glimmer の Text コンポーネントを使用すると、色、フォントサイズ、フォント スタイル、フォントの太さ、フォント ファミリー、文字間隔、テキストの配置など、さまざまなテキスト プロパティを設定できます。

Jetpack Compose Glimmer Text は、色の一致をインテリジェントに管理するという点で独自性があります。たとえば、色のオーバーライドが指定されていない場合、テキストは、そのテキストが配置されている最も近いサーフェスによって提供されるコンテンツの色にデフォルト設定されます。

例: ボックス内にテキストの見出しを作成する

@Composable
fun TextSample() {
    Text(
        text = "Hello Glimmer",
        style = GlimmerTheme.typography.titleLarge
    )
}
TextSample.kt

コードに関する主なポイント

• 色が指定されていないため、このテキストは最も近いサーフェスを参照して、最も読みやすい色（通常は白）を選択します。

サイズ

Jetpack Compose Glimmer のタイポグラフィ スケールは、標準のモバイル マテリアル デザインよりも大幅に大きくなっています。TitleLarge や BodyLarge などのスタイルはどちらも 30.sp で、Caption は 18.sp です。

Google Sans Flex を使用する

Google Sans Flex は、Jetpack Compose Glimmer の一部として提供される、AI メガネ専用に選択された可変フォントです。フォントの丸みを帯びた角と調整可能な軸により、最適な光学サイズ設定が可能になり、テキストがひと目でわかりやすく、読みやすくなります。可能であれば、アプリとシステム間でユーザーの一貫性を高めるために、ディスプレイ メガネに表示されるすべてのテキストに Google Sans Flex を使用してください。

Google Sans Flex を使用するには、アプリの依存関係に add the glimmer-google-fonts ライブラリを追加し、フォントを GlimmerTheme にグローバルに適用します。

@Composable
fun GoogleSansFlexTypographySample() {
    val typography = createGoogleSansFlexTypography()
    GlimmerTheme(typography = typography) {
        Text("Hello World", style = GlimmerTheme.typography.titleLarge)
    }
}