Mit Schriftarten arbeiten

Auf dieser Seite wird beschrieben, wie Sie Schriftarten in der App „Schreiben“ festlegen.

Schriftart festlegen

Text hat einen fontFamily-Parameter, mit dem die im zusammensetzbar. Standardmäßig werden Schriftfamilien mit Serifen-, Sans-Serif-, Festbreiten- und kursiven Schriftgrößen sind eingeschlossen:

@Composable
fun DifferentFonts() {
    Column {
        Text("Hello World", fontFamily = FontFamily.Serif)
        Text("Hello World", fontFamily = FontFamily.SansSerif)
    }
}
TextSnippets.kt

Der Text

Sie können das Attribut fontFamily verwenden, um mit benutzerdefinierten Schriftarten und Schriftarten zu arbeiten definiert im Ordner res/font:

Grafische Darstellung der Auflösung > Schriftartordner in der Entwicklungsumgebung

In diesem Beispiel sehen Sie, wie Sie ein fontFamily-Objekt anhand dieser Schriftart definieren und mithilfe der Funktion Font:

val firaSansFamily = FontFamily(
    Font(R.font.firasans_light, FontWeight.Light),
    Font(R.font.firasans_regular, FontWeight.Normal),
    Font(R.font.firasans_italic, FontWeight.Normal, FontStyle.Italic),
    Font(R.font.firasans_medium, FontWeight.Medium),
    Font(R.font.firasans_bold, FontWeight.Bold)
)
TextSnippets.kt

Sie können diese fontFamily an Ihre Text-Komposition übergeben. Da ein fontFamily kann unterschiedliche Gewichtungen enthalten, Sie können fontWeight manuell auf Wählen Sie die richtige Schriftstärke für Ihren Text aus:

Column {
    Text(text = "text", fontFamily = firaSansFamily, fontWeight = FontWeight.Light)
    Text(text = "text", fontFamily = firaSansFamily, fontWeight = FontWeight.Normal)
    Text(
        text = "text",
        fontFamily = firaSansFamily,
        fontWeight = FontWeight.Normal,
        fontStyle = FontStyle.Italic
    )
    Text(text = "text", fontFamily = firaSansFamily, fontWeight = FontWeight.Medium)
    Text(text = "text", fontFamily = firaSansFamily, fontWeight = FontWeight.Bold)
}
TextSnippets.kt

Der Text

Informationen zum Festlegen der Typografie in Ihrer gesamten App finden Sie unter Benutzerdefinierte Designsysteme in Compose.

Herunterladbare Schriftarten

Beginnen bei Schreiben 1.2.0 können Sie die Fonts API in der Compose-App verwenden, um Google asynchron verwenden und sie in Ihrer App verwenden.

Derzeit werden keine Schriftarten unterstützt, die von benutzerdefinierten Anbietern heruntergeladen werden können.

Herunterladbare Schriftarten programmatisch verwenden

Gehen Sie folgendermaßen vor, um eine Schriftart programmatisch aus Ihrer App herunterzuladen:

  1. Fügen Sie die Abhängigkeit hinzu:

    Cool

    dependencies {
    ...
    implementation "androidx.compose.ui:ui-text-google-fonts:1.7.0"
}

    Kotlin

    dependencies {
    ...
    implementation("androidx.compose.ui:ui-text-google-fonts:1.7.0")
}
  2. Initialisieren Sie das GoogleFont.Provider mit den Anmeldedaten für Google Fonts: 
    val provider = GoogleFont.Provider(
    providerAuthority = "com.google.android.gms.fonts",
    providerPackage = "com.google.android.gms",
    certificates = R.array.com_google_android_gms_fonts_certs
)
    TextDownloadableFontsSnippets.kt
     Der Anbieter erhält folgende Parameter:
    • Die Befugnis des Schriftartenanbieters für Google Fonts.
    • Das Paket des Schriftartanbieters, um die Identität des Anbieters zu überprüfen
    • Eine Liste von Hash-Sätzen für die Zertifikate, um die Identität des Dienstanbieter. Die für den Google Fonts-Anbieter erforderlichen Hash-Werte finden Sie in der Datei font_certs.xml in der Beispiel-App „Jetchat“.
  3. Definieren Sie FontFamily: 
    // ...
 import androidx.compose.ui.text.googlefonts.GoogleFont
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.googlefonts.Font
 // ...

val fontName = GoogleFont("Lobster Two")

val fontFamily = FontFamily(
    Font(googleFont = fontName, fontProvider = provider)
)
    TextDownloadableFontsSnippets.kt
     Mit der Funktion FontWeight und FontStyle Entsprechend: 
    // ...
 import androidx.compose.ui.text.googlefonts.GoogleFont
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.googlefonts.Font
 // ...

val fontName = GoogleFont("Lobster Two")

val fontFamily = FontFamily(
    Font(
        googleFont = fontName,
        fontProvider = provider,
        weight = FontWeight.Bold,
        style = FontStyle.Italic
    )
)
    TextDownloadableFontsSnippets.kt
  4. Konfigurieren Sie die FontFamily für die Verwendung in Ihrer zusammensetzbaren Textfunktion:

Text(
    fontFamily = fontFamily, text = "Hello World!"
)
TextDownloadableFontsSnippets.kt

Sie können auch Zu verwendende Typografie Dein FontFamily:

val MyTypography = Typography(
    bodyMedium = TextStyle(
        fontFamily = fontFamily, fontWeight = FontWeight.Normal, fontSize = 12.sp/*...*/
    ),
    bodyLarge = TextStyle(
        fontFamily = fontFamily,
        fontWeight = FontWeight.Bold,
        letterSpacing = 2.sp,
        /*...*/
    ),
    headlineMedium = TextStyle(
        fontFamily = fontFamily, fontWeight = FontWeight.SemiBold/*...*/
    ),
    /*...*/
)
TextDownloadableFontsSnippets.kt

Wählen Sie als Nächstes für die Typografie das Design Ihrer App aus:

MyAppTheme(
    typography = MyTypography
)/*...*/
TextDownloadableFontsSnippets.kt

Ein Beispiel für eine App, in der herunterladbare Schriftarten in Compose zusammen mit Material3 implementiert werden, ist die Beispielanwendung Jetchat.

Fallback-Schriftarten hinzufügen

Sie können eine Kette von Fallbacks für Ihre Schriftart festlegen, falls die Schriftart nicht nicht ordnungsgemäß herunterladen können. Wenn Sie z. B. Ihre herunterladbare Schriftart definiert haben, wie hier:

// ...
 import androidx.compose.ui.text.googlefonts.Font
 // ...

val fontName = GoogleFont("Lobster Two")

val fontFamily = FontFamily(
    Font(googleFont = fontName, fontProvider = provider),
    Font(googleFont = fontName, fontProvider = provider, weight = FontWeight.Bold)
)
TextDownloadableFontsSnippets.kt

Sie können die Standardeinstellungen für die Schriftart für beide Schriftstärken wie folgt festlegen:

// ...
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.googlefonts.Font
 // ...

val fontName = GoogleFont("Lobster Two")

val fontFamily = FontFamily(
    Font(googleFont = fontName, fontProvider = provider),
    Font(resId = R.font.my_font_regular),
    Font(googleFont = fontName, fontProvider = provider, weight = FontWeight.Bold),
    Font(resId = R.font.my_font_regular_bold, weight = FontWeight.Bold)
)
TextDownloadableFontsSnippets.kt

Achten Sie darauf, dass Sie die richtigen Importe hinzufügen.

Wenn du das FontFamily so definiert, wird ein FontFamily erstellt, der zwei Ketten enthält. 1 pro Gewicht. Der Lademechanismus versucht zuerst, die Onlineschriftart aufzulösen, und dann die Schriftart, die sich in Ihrem lokalen Ressourcenordner R.font befindet.

Fehler in der Implementierung beheben

Sie können einen Debugging-Coroutinen-Handler definieren, um zu prüfen, ob die Schrift richtig heruntergeladen wird. Der Handle gibt an, was passieren soll, wenn die Schrift asynchron nicht geladen werden kann.

Erstellen Sie zuerst ein CoroutineExceptionHandler:

val handler = CoroutineExceptionHandler { _, throwable ->
    // process the Throwable
    Log.e(TAG, "There has been an issue: ", throwable)
}
TextDownloadableFontsSnippets.kt

Übergeben Sie ihn an den createFontFamilyResolver , damit der Resolver den neuen Handler verwendet:

CompositionLocalProvider(
    LocalFontFamilyResolver provides createFontFamilyResolver(LocalContext.current, handler)
) {
    Column {
        Text(
            text = "Hello World!", style = MaterialTheme.typography.bodyMedium
        )
    }
}
TextDownloadableFontsSnippets.kt

Sie können auch die isAvailableOnDevice API des Anbieters, um zu testen, ob der Anbieter verfügbar ist und die Zertifikate verfügbar sind richtig konfiguriert ist. Rufen Sie dazu die Methode isAvailableOnDevice auf. die „false“ zurückgibt, wenn der Anbieter falsch konfiguriert ist.

val context = LocalContext.current
LaunchedEffect(Unit) {
    if (provider.isAvailableOnDevice(context)) {
        Log.d(TAG, "Success!")
    }
}
TextDownloadableFontsSnippets.kt

Einschränkungen

Es dauert mehrere Monate, bis neue Schriftarten bei Google Fonts für Android verfügbar sind. Es gibt eine zeitliche Lücke zwischen dem Hinzufügen einer Schriftart in fonts.google.com überprüfen und wenn sie über die herunterladbare Fonts API (entweder im View-System oder in Compose) Neu kann es vorkommen, dass hinzugefügte Schriftarten in Ihrer App nicht geladen werden. IllegalStateException Damit Entwickler diesen Fehler besser erkennen können, Wir haben in „Schreiben“ eine beschreibende Botschaft für die Ausnahme mit den Änderungen hinzugefügt. hier. Wenn Sie Probleme finden, melden Sie sie mithilfe des Tracker.

Variable Schriftarten verwenden

Eine variable Schriftart ist ein Schriftformat, bei dem eine Schriftartdatei Stile. Mit variablen Schriftarten können Sie Achsen (oder Parameter) ändern, um Ihren bevorzugten Stil. Diese Achsen können standardmäßig sein, z. B. „Schriftstärke“, „Breite“, „Schrägstellung“ und „Kursiv“, oder benutzerdefiniert, was sich je nach variabler Schriftart unterscheidet.

Fünf Konfigurationen derselben Variablenschrift mit unterschiedlichen Achsenwerten.
Abbildung 1: Text mit derselben variablen Schrift und einer anderen Achse Werte.

Wenn Sie variable Schriftarten anstelle von normalen Schriftartdateien verwenden, können Sie nur eine Schriftartdatei anstelle von mehreren.

Weitere Hintergrundinformationen zu variablen Schriftarten finden Sie unter Google Fonts Wissen, der gesamte Katalog der verfügbaren variable Schriftarten und eine Tabelle der unterstützten Achsen für jede Schriftart.

In diesem Dokument erfahren Sie, wie Sie eine variable Schriftart in der Compose-App implementieren.

Variable Schriftart laden

  1. Laden Sie die gewünschte variable Schriftart herunter (z. B. Roboto Flex) und legen Sie sie in den Ordner app/res/font in Ihrer App ab.Die hinzugefügte ttf-Datei ist die variable Schriftversion der Schrift und der Name der Schriftdatei ist ausschließlich in Kleinbuchstaben geschrieben und enthält keine Sonderzeichen.

  2. Wenn Sie eine variable Schriftart laden möchten, definieren Sie eine FontFamily mit der Schriftart, die sich im Verzeichnis res/font/ befindet:

    // In Typography.kt
@OptIn(ExperimentalTextApi::class)
val displayLargeFontFamily =
    FontFamily(
        Font(
            R.font.robotoflex_variable,
            variationSettings = FontVariation.Settings(
                FontVariation.weight(950),
                FontVariation.width(30f),
                FontVariation.slant(-6f),
            )
        )
    )
    VariableFontsSnippets.kt

    Mit der FontVariation API lassen sich Standard-Schriftachsen konfigurieren, z. B.: weight, width und slant aus. Dies sind Standardachsen, die in beliebiger Schriftart verfügbar. Je nachdem, wo der Schriftschnitt verwendet wird, können Sie verschiedene Konfigurationen erstellen.

  3. Variable Schriftarten sind nur für Android-Version O und höher verfügbar. Fügen Sie Schutzmaßnahme und konfigurieren Sie ein geeignetes Fallback:

    // In Typography.kt
val default = FontFamily(
    /*
    * This can be any font that makes sense
    */
    Font(
        R.font.robotoflex_static_regular
    )
)
@OptIn(ExperimentalTextApi::class)
val displayLargeFontFamily = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
    FontFamily(
        Font(
            R.font.robotoflex_variable,
            variationSettings = FontVariation.Settings(
                FontVariation.weight(950),
                FontVariation.width(30f),
                FontVariation.slant(-6f),
            )
        )
    )
} else {
    default
}
    VariableFontsSnippets.kt

  4. Extrahieren Sie die Einstellungen zur einfacheren Wiederverwendung in eine Reihe von Konstanten und ersetzen Sie die die folgenden Konstanten festzulegen:

    // VariableFontDimension.kt
object DisplayLargeVFConfig {
    const val WEIGHT = 950
    const val WIDTH = 30f
    const val SLANT = -6f
    const val ASCENDER_HEIGHT = 800f
    const val COUNTER_WIDTH = 500
}

@OptIn(ExperimentalTextApi::class)
val displayLargeFontFamily = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
    FontFamily(
        Font(
            R.font.robotoflex_variable,
            variationSettings = FontVariation.Settings(
                FontVariation.weight(DisplayLargeVFConfig.WEIGHT),
                FontVariation.width(DisplayLargeVFConfig.WIDTH),
                FontVariation.slant(DisplayLargeVFConfig.SLANT),
            )
        )
    )
} else {
    default
}
    VariableFontsSnippets.kt

  5. Konfiguriere die Typografie von Material Design 3 für die Verwendung von FontFamily:

    // Type.kt
val Typography = Typography(
    displayLarge = TextStyle(
        fontFamily = displayLargeFontFamily,
        fontSize = 50.sp,
        lineHeight = 64.sp,
        letterSpacing = 0.sp,
        /***/
    )
)
    VariableFontsSnippets.kt

    In diesem Beispiel wird die displayLarge Material 3-Typografie verwendet, die andere Standardschrifteinstellungen und empfohlene Verwendungen hat. Zum Beispiel sollten Sie displayLarge für kurzen, wichtigen Text, da dies der größte Text auf dem Bildschirm ist.

    Bei Material 3 können Sie die Standardwerte TextStyle und fontFamily, um die Typografie anzupassen. Im Snippet oben konfigurieren Sie Instanzen von TextStyle, um die Schrifteinstellungen für jede Schriftfamilie anzupassen.

  6. Nachdem Sie die Typografie definiert haben, übergeben Sie sie an das M3-MaterialTheme:

    MaterialTheme(
    colorScheme = MaterialTheme.colorScheme,
    typography = Typography,
    content = content
)
    VariableFontsSnippets.kt

  7. Verwenden Sie abschließend ein Text-Element und geben Sie als Stil einen der definierten Typografiestile an, MaterialTheme.typography.displayLarge:

    @Composable
@Preview
fun CardDetails() {
    MyCustomTheme {
        Card(
            shape = RoundedCornerShape(8.dp),
            elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
        ) {
            Column(
                modifier = Modifier.padding(16.dp)
            ) {
                Text(
                    text = "Compose",
                    style = MaterialTheme.typography.displayLarge,
                    modifier = Modifier.padding(bottom = 8.dp),
                    maxLines = 1
                )
                Text(
                    text = "Beautiful UIs on Android",
                    style = MaterialTheme.typography.headlineMedium,
                    modifier = Modifier.padding(bottom = 8.dp),
                    maxLines = 2
                )
                Text(
                    text = "Jetpack Compose is Android’s recommended modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.",
                    style = MaterialTheme.typography.bodyLarge,
                    modifier = Modifier.padding(bottom = 8.dp),
                    maxLines = 3
                )
            }
        }
    }
}
    VariableFontsSnippets.kt

    Jede zusammensetzbare Funktion Text wird anhand des Stils und der enthält eine andere Konfiguration für variable Schriftarten. Sie können MaterialTheme.typography, um die für M3 bereitgestellte Typografie abzurufen MaterialTheme zusammensetzbar.

Drei verschiedene Texte mit unterschiedlichen Schriftkonfigurationen.
Abbildung 2. Variable Schriftart in drei verschiedenen Konfigurationen.

Benutzerdefinierte Achsen verwenden

Schriftarten können auch benutzerdefinierte Achsen haben. Diese werden in der Schriftartdatei selbst definiert. Die Schriftart Roboto Flex hat beispielsweise die Aufstiegshöhe ("YTAS"), die Passt die Höhe der Oberlängen in Kleinbuchstaben an, während die Zählerbreite ("XTRA") die Breite jedes Buchstabens anpasst.

Sie können den Wert dieser Achsen mit den Einstellungen für FontVariation ändern.

Weitere Informationen zu den benutzerdefinierten Achsen, die Sie für eine Schriftart konfigurieren können, finden Sie in der Tabelle der unterstützten Achsen für jede Schriftart.

  1. Um benutzerdefinierte Achsen zu verwenden, definieren Sie Funktionen für die benutzerdefinierten ascenderHeight- und counterWidth Achsen:

    fun ascenderHeight(ascenderHeight: Float): FontVariation.Setting {
    require(ascenderHeight in 649f..854f) { "'Ascender Height' must be in 649f..854f" }
    return FontVariation.Setting("YTAS", ascenderHeight)
}

fun counterWidth(counterWidth: Int): FontVariation.Setting {
    require(counterWidth in 323..603) { "'Counter width' must be in 323..603" }
    return FontVariation.Setting("XTRA", counterWidth.toFloat())
}
    VariableFontsSnippets.kt

    Diese Funktionen führen Folgendes aus:

    • Definieren Sie Schutzmaßnahmen für die Werte, die akzeptiert werden. Wie Sie in den Katalog mit variabler Schrift, ascenderHeight (YTAS) hat ein Der Mindestwert beträgt 649f und der Höchstwert 854f.
    • Geben Sie die Schriftarteinstellung zurück, damit die Konfiguration zur Schriftart hinzugefügt werden kann. In der FontVariation.Setting()-Methode lautet der Achsenname (YTAS, XTRA) hartcodiert und übernimmt den Wert als Parameter.

  2. Übergeben Sie unter Verwendung der Achsen mit der Schriftartkonfiguration zusätzliche Parameter an jede geladene Font:

    @OptIn(ExperimentalTextApi::class)
val displayLargeFontFamily = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
    FontFamily(
        Font(
            R.font.robotoflex_variable,
            variationSettings = FontVariation.Settings(
                FontVariation.weight(DisplayLargeVFConfig.WEIGHT),
                FontVariation.width(DisplayLargeVFConfig.WIDTH),
                FontVariation.slant(DisplayLargeVFConfig.SLANT),
                ascenderHeight(DisplayLargeVFConfig.ASCENDER_HEIGHT),
                counterWidth(DisplayLargeVFConfig.COUNTER_WIDTH)
            )
        )
    )
} else {
    default
}
    VariableFontsSnippets.kt

    Beachten Sie, dass die Höhe der Oberlängen in Kleinbuchstaben jetzt erhöht ist und der Anderer Text ist breiter:

Drei verschiedene Texte mit unterschiedlichen Konfigurationen für variable Schriftarten mit benutzerdefinierten Achsen. Einige haben höhere Aufstrichhöhen bei Kleinbuchstaben und sind breiter als zuvor.
Abbildung 3: Text zu benutzerdefinierten Achsen, die für variable Schriftarten festgelegt sind

Weitere Informationen

Weitere Informationen finden Sie im folgenden Blogpost über variable Schriftarten: