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 sind. 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) } }
Sie können das Attribut fontFamily
verwenden, um mit benutzerdefinierten Schriftarten und Schriftarten zu arbeiten
definiert im Ordner res/font
:
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) )
Sie können diesen fontFamily
an Ihre zusammensetzbare Funktion Text
ü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) }
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:
- Fügen Sie die Abhängigkeit hinzu:
Cool
dependencies { ... implementation "androidx.compose.ui:ui-text-google-fonts:1.6.8" }
Kotlin
dependencies { ... implementation("androidx.compose.ui:ui-text-google-fonts:1.6.8") }
- Initialisieren Sie das
GoogleFont.Provider
mit den Anmeldedaten für Google Fonts: Der Anbieter erhält folgende Parameter: <ph type="x-smartling-placeholder">val provider = GoogleFont.Provider( providerAuthority = "com.google.android.gms.fonts", providerPackage = "com.google.android.gms", certificates = R.array.com_google_android_gms_fonts_certs )
- </ph>
- 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. Hier finden Sie die für den Google Fonts-Anbieter erforderlichen Hashes.
in der Datei
font_certs.xml
im Jetchat-Beispiel-App
- Definieren Sie
FontFamily
: Mit der Funktion// ... 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) )
FontWeight
undFontStyle
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 ) )
- Konfigurieren Sie
FontFamily
als die in der zusammensetzbaren Textfunktion verwendet wird:
Text( fontFamily = fontFamily, text = "Hello World!" )
![](https://developer.android.google.cn/static/develop/ui/compose/images/text-dl-fontfamily.png?authuser=9&hl=de)
Sie können auch
Zu verwendende Typografie
Dein FontFamily
:
val MyTypography = Typography( labelMedium = TextStyle( fontFamily = fontFamily, fontWeight = FontWeight.Normal, fontSize = 12.sp/*...*/ ), labelLarge = TextStyle( fontFamily = fontFamily, fontWeight = FontWeight.Bold, letterSpacing = 2.sp, /*...*/ ), displayMedium = TextStyle( fontFamily = fontFamily, fontWeight = FontWeight.SemiBold/*...*/ ), /*...*/ )
Wählen Sie als Nächstes für die Typografie das Design Ihrer App aus:
MyAppTheme( typography = MyTypography )/*...*/
Beispiel für eine App, in der Schriftarten zum Herunterladen in Compose implementiert werden zusammen mit Material3 verwendet, finden Sie in der Beispiel-App 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) )
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) )
Achten Sie darauf, die richtigen Importe hinzuzufü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
Um zu überprüfen, ob die Schriftart korrekt heruntergeladen wird, können Sie eine . Dein Alias gibt an, was zu tun ist, wenn du wenn die Schriftart nicht asynchron geladen wird.
Erstellen Sie zuerst ein
CoroutineExceptionHandler
:
val handler = CoroutineExceptionHandler { _, throwable -> // process the Throwable Log.e(TAG, "There has been an issue: ", throwable) }
Ü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 ) } }
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!") } }
Einschränkungen
Es dauert mehrere Monate, bis neue Schriftarten von 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. Hierbei kann es sich um Standardachsen wie Gewicht, Breite, Neigung, und kursiv oder benutzerdefiniert sein, die sich in den variablen Schriftarten unterscheiden.
<ph type="x-smartling-placeholder">![Fünf Konfigurationen derselben Variablenschrift mit unterschiedlichen Achsenwerten.](https://developer.android.google.cn/static/develop/ui/compose/images/text/vf-configs.png?authuser=9&hl=de)
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
Laden Sie die zu verwendende Schriftart für die Variable herunter (z. B. Roboto Flex) und lege sie in deiner App im Ordner
app/res/font
ab. Stellen Sie sicher, dass die .ttf
ist die Version mit variabler Schriftgröße der Schriftart und der Name des Ihre Schriftartdatei ist nur kleingeschrieben und enthält keine Sonderzeichen.Um eine variable Schriftart zu laden, definieren Sie ein
FontFamily
mithilfe der Schriftart im Verzeichnisres/font/
:// 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), ) ) )
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. Sie können verschiedene Konfigurationen des je nachdem, wo sie verwendet wird.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 }
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 }
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, /***/ ) )
In diesem Beispiel wird
displayLarge
Material 3-Typografie verwendet, die andere Standardeinstellungen für Schriftarten und empfohlene Verwendungszwecke. Sie sollten beispielsweisedisplayLarge
für kurzen, wichtigen Text, da dies der größte Text auf dem Bildschirm ist.Bei Material 3 können Sie die Standardwerte
TextStyle
undfontFamily
, um die Typografie anzupassen. Im Snippet oben konfigurieren Sie Instanzen vonTextStyle
, um die Schriftarteinstellungen für die einzelnen Schriftfamilien anzupassen.Nachdem Sie die Typografie definiert haben, übergeben Sie sie an die M3-
MaterialTheme
:MaterialTheme( colorScheme = MaterialTheme.colorScheme, typography = Typography, content = content )
Verwenden Sie schließlich eine zusammensetzbare Funktion
Text
und geben Sie als Stil einen der definierten Typografiestile,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 ) } } } }
Jede zusammensetzbare Funktion
Text
wird anhand des Stils und der enthält eine andere Konfiguration für variable Schriftarten. Sie könnenMaterialTheme.typography
, um die für M3 bereitgestellte Typografie abzurufenMaterialTheme
zusammensetzbar.
![Drei verschiedene Texte mit unterschiedlichen Schriftkonfigurationen](https://developer.android.google.cn/static/develop/ui/compose/images/text/vf-standard-axes.png?authuser=9&hl=de)
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.
Um benutzerdefinierte Achsen zu verwenden, definieren Sie Funktionen für die benutzerdefinierten
ascenderHeight
- undcounterWidth
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()) }
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ägt649f
und der Höchstwert854f
. - 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.
- Definieren Sie Schutzmaßnahmen für die Werte, die akzeptiert werden. Wie Sie in den
Katalog mit variabler Schrift,
Ü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 }
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 Oberlängen in Kleinbuchstaben und sind breiter als zuvor.](https://developer.android.google.cn/static/develop/ui/compose/images/text/vf-custom-axes.png?authuser=9&hl=de)
Weitere Informationen
Weitere Informationen finden Sie im folgenden Blogpost über variable Schriftarten:
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Ressourcen in „Compose“
- Text gestalten
- Material Design 2 in Compose