Ta strona została przetłumaczona przez Cloud Translation API.

Praca z czcionkami

Na tej stronie dowiesz się, jak ustawić czcionki w aplikacji Utwórz.

Ustaw czcionkę

Text ma parametr fontFamily, który umożliwia ustawienie czcionki używanej w komponowalnym elemencie. Domyślnie rodziny czcionek szeryfowych, bezszeryfowych, o stałej szerokości i kursywy. są uwzględniane:

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

Słowa

Atrybutu fontFamily możesz używać do pracy z niestandardowymi czcionkami i fontami zdefiniowanymi w folderze res/font:

Graficzne przedstawienie rozdzielczości > folder font w środowisku programistycznym

Ten przykład pokazuje, jak zdefiniować fontFamily na podstawie tych plików czcionek i za pomocą funkcji 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

Możesz przekazać ten element fontFamily do kompozytu Text. Ponieważ Parametr fontFamily może obejmować różne wagi. Możesz ręcznie ustawić wartość fontWeight na wybrać odpowiednią wagę dla tekstu:

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

Słowa

Aby dowiedzieć się, jak ustawić typografię w całej aplikacji, przeczytaj artykuł Niestandardowe systemy projektowania w Compose.

Czcionki do pobrania

Od wersji Compose 1.2.0 możesz używać interfejsu API do pobierania czcionek w aplikacji Compose, aby asynchronicznie pobierać czcionki Google i korzystać z nich w aplikacji.

Obsługa czcionek do pobrania udostępnianych przez dostawców niestandardowych nie jest obecnie dostępna.

Używanie czcionek do pobrania za pomocą kodu

Aby pobrać czcionkę automatycznie z aplikacji, wykonaj te czynności:

Dodaj zależność:

OdlotoweKotlin

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

dependencies {
    ...
    implementation("androidx.compose.ui:ui-text-google-fonts:1.7.8")
}

Zainicjuj GoogleFont.Provider danymi logowania do 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
```
Dostawca otrzymuje te parametry:
- Urząd dostawcy czcionek Google Fonts.
- Pakiet dostawcy czcionek służący do weryfikacji tożsamości dostawcy.
- Lista zestawów haszy certyfikatów służących do weryfikacji tożsamości dostawcy. Hasze wymagane przez dostawcę Google Fonts znajdziesz w pliku font_certs.xml w aplikacji przykładowej Jetchat.

Określ ustawienie 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

Możesz też wysyłać zapytania o inne parametry czcionki, takie jak waga i styl, FontWeight i FontStyle :

// ...
 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

Skonfiguruj FontFamily tak, aby używane w funkcji tworzenia tekstu.

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

Możesz także określić Typografia, której należy użyć 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

Następnie ustaw typografię na motyw aplikacji:

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

Przykładem aplikacji, która implementuje czcionki do pobrania w Compose w połączeniu z Material3, jest aplikacja Jetchat.

Dodawanie czcionek zastępczych

Możesz określić łańcuch kreacji zastępczych dla czcionki, jeśli czcionka się nie powiedzie. pobierz poprawnie. Jeśli na przykład masz zdefiniowany czcionkę do pobrania w ten sposób:

// ...
 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

Domyślne czcionki dla obu grubości możesz zdefiniować w ten sposób:

// ...
 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

Upewnij się, że dodajesz prawidłowe importy.

Zdefiniowanie elementu FontFamily w ten sposób powoduje utworzenie elementu FontFamily zawierającego 2 łańcuchy, po jednym na każdą wagę. Mechanizm wczytywania najpierw spróbuje rozpoznać czcionkę online, oraz czcionkę z lokalnego folderu zasobów R.font.

Debugowanie implementacji

Aby sprawdzić, czy czcionka jest pobierana prawidłowo, możesz zdefiniować debugujący moduł obsługi coroutine. Twój nick określa, co się stanie, jeśli czcionka nie wczyta się asynchronicznie.

Zacznij od utworzenia CoroutineExceptionHandler:

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

Przekaż ją do createFontFamilyResolver aby resolver używał nowego modułu obsługi:

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

Możesz też użyć interfejsu API dostawcy isAvailableOnDevice, aby sprawdzić, czy dostawca jest dostępny i czy certyfikaty są prawidłowo skonfigurowane. Aby to zrobić, możesz wywołać metodę isAvailableOnDevice, która zwraca wartość false, jeśli dostawca jest skonfigurowany nieprawidłowo.

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

Uwagi

Google Fonts ma kilka miesięcy, by udostępnić nowe czcionki na Androida. Istnieje pewien czas pomiędzy dodaniem czcionki na stronie fonts.google.com a momentem, gdy staje się ona dostępna w interfejsie API do pobrania czcionek (w systemie View lub w Compose). Nowo dodane czcionki mogą się nie wczytać w aplikacji z powodu błędu IllegalStateException. Aby ułatwić deweloperom identyfikację tego błędu w porównaniu z innymi typami błędów wczytywania czcionek, dodaliśmy opisy wyjątków w sekcji Tworzenie z zmianami. Jeśli znajdziesz jakieś problemy, zgłoś je na podstawie problemu .

Korzystanie z czcionek zmiennych

Czcionka zmienna to format czcionki, który umożliwia umieszczenie w jednym pliku czcionek różnych stylów. Dzięki czcionkom zmiennym możesz modyfikować osie (czyli parametry), aby wygenerować preferowany styl. Osie te mogą być standardowe, np. waga, szerokość, nachylenie, czy kursywa lub niestandardowe, które różnią się w zależności od czcionki.

Pięć konfiguracji tej samej czcionki zmiennej z różnymi wartościami na osi. — **Rysunek 1.** Tekst korzystający z tej samej czcionki zmiennej dostosowanej za pomocą różnych osi .

Korzystanie z czcionek zmiennych zamiast zwykłych plików czcionek pozwala mieć tylko 1 plik czcionki zamiast wielu.

Więcej informacji na temat czcionek zmiennych znajdziesz na stronie Google Fonts Wiedza, cały katalog dostępnych zmienne i tabelę obsługiwanych osi dla każdej z nich czcionki.

Ten dokument pokazuje, jak wdrożyć czcionkę zmiennej w aplikacji Compose.

Ładowanie czcionki zmiennej

Pobierz czcionkę zmiennej, której chcesz użyć (np. Roboto Flex) i umieść go w folderze app/res/font swojej aplikacji. Upewnij się, że plikPlik ttf, który dodajesz, jest wersją czcionki zmiennej. Nazwa pliku czcionki musi składać się wyłącznie z małych liter i nie może zawierać znaków specjalnych.

Uwaga: czcionki zmienne nie są obecnie obsługiwane w przypadku czcionek do pobrania. Sprawdź najnowsze informacje o tym błędzie.

Aby załadować czcionkę zmienną, zdefiniuj FontFamily za pomocą czcionki umieszczonej w katalogu res/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),
            )
        )
    )VariableFontsSnippets.kt

Interfejs FontVariation API umożliwia konfigurowanie standardowych osie czcionek, takich jak weight, width i nachylenie. Są to standardowe osie dostępne w przypadku dowolnej czcionki zmiennej. Możesz tworzyć różne konfiguracje w zależności od tego, gdzie czcionka będzie używana.

Czcionki zmiennych są dostępne tylko na Androidzie O lub nowszym, więc dodaj i skonfigurować odpowiednią konfigurację zastępczą:

// 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

Wyodrębnij ustawienia w zbiór stałych wartości, aby ułatwić ich ponowne użycie, i zastąp ustawienia czcionek tymi stałymi wartościami:

// 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

Aby używać FontFamily, skonfiguruj typografię Material Design 3:
```
// Type.kt
val Typography = Typography(
    displayLarge = TextStyle(
        fontFamily = displayLargeFontFamily,
        fontSize = 50.sp,
        lineHeight = 64.sp,
        letterSpacing = 0.sp,
        /***/
    )
)VariableFontsSnippets.kt
```
Ten przykład używa displayLarge typografii Material 3, która ma inne domyślne ustawienia czcionki i zalecane zastosowania. Na przykład użyj displayLarge w przypadku krótkiego, krytycznego tekstu – jest to największy tekst na ekranie.

W przypadku Material 3 możesz zmienić wartości domyślne TextStyle i fontFamily, aby dostosować typografię. W tym fragmencie kodu konfigurujesz wystąpienia TextStyle, aby dostosować ustawienia czcionki dla każdej rodziny czcionek.

Gdy już zdefiniujesz typografię, przekaż ją do MaterialTheme M3:

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

Na koniec użyj funkcji kompozycyjnej Text i określ styl do jednego ze zdefiniowanych style typografii, 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

Każdy element kompozycyjny Text jest konfigurowany za pomocą stylu motywu Material ma inną konfigurację czcionki zmiennej. Za pomocą MaterialTheme.typography, aby pobrać typografię udostępnioną mechanizmowi M3 Funkcja kompozycyjna MaterialTheme.

Trzy różne teksty o różnych konfiguracjach czcionek. — **Rysunek 2.** Czcionka zmiennej została zastosowana w 3 różnych konfiguracjach.

Używanie osi niestandardowych

Czcionki mogą też mieć osi niestandardowe. Są one zdefiniowane w samym pliku czcionki. Na przykład czcionka Roboto Flex ma oś wysokości rosnącej ("YTAS"), która dostosowuje wysokość małych liter rosnących, a szerokość licznika ("XTRA") dostosowuje szerokość każdej litery.

Możesz zmienić wartości tych osi w ustawieniach FontVariation.

Więcej informacji o niestandardowych osiach, które można skonfigurować dla czcionki, znajdziesz w tabelę obsługiwanych osi dla każdej czcionki.

Aby używać niestandardowych osi, zdefiniuj funkcje niestandardowych ascenderHeight i Osie (counterWidth):
```
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
```
Te funkcje wykonują te czynności:
- Zdefiniowanie barier dla wartości, które mogą akceptować. Jak widać w katalogu czcionek zmiennych, ascenderHeight (YTAS) ma minimalną wartość 649f i maksymalną 854f.
- Przywróć ustawienia czcionki, aby konfiguracja była gotowa do dodania do czcionki. W metodzie FontVariation.Setting() nazwa osi (YTAS, XTRA) jest zaprogramowana na stałe i przyjmuje wartość jako parametr.

Korzystając z osi z konfiguracją czcionki, przekaż dodatkowe parametry do każdy wczytany element 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

Zwróć uwagę, że wysokość liter alfabetu łacińskiego została zwiększona, a Inny tekst jest szerszy:

Trzy różne teksty z różnymi konfiguracjami czcionek zmiennych i ustawionymi niestandardowymi osiami. Niektóre z nich mają szersze litery z wysokością pisane małymi literami i są szersze niż wcześniej. — **Rys. 3.** Tekst przedstawiający niestandardowe osie ustawione na zmiennych czcionkach.

Dodatkowe materiały

Więcej informacji znajdziesz w następującym poście na blogu na temat czcionek zmiennych:

Tylko Twój typ: zmienne czcionki w narzędziu Compose

Obecnie nie ma rekomendacji.

Zaloguj się na swoje konto Google.