Praca z czcionkami

Na tej stronie dowiesz się, jak ustawić czcionki w aplikacji Compose.

Ustawianie czcionki

Komponent Text ma parametr fontFamily, który umożliwia ustawienie czcionki używanej w komponencie. Domyślnie uwzględniane są rodziny czcionek serif, sans-serif, monospace i cursive uwzględniane:

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

Słowa

Za pomocą atrybutu fontFamily możesz pracować z czcionkami niestandardowymi i krojami pisma zdefiniowanymi w folderze res/font:

Graficzne przedstawienie folderu res > 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 parametr fontFamily do komponentu Text. Ponieważ fontFamily może zawierać różne grubości, możesz ręcznie ustawić fontWeight, aby wybrać odpowiednią grubość 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 czcionek do pobrania w aplikacji Compose, aby asynchronicznie pobierać czcionki Google i używać ich w aplikacji.

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

Programowe używanie czcionek do pobrania

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

Dodaj zależność:

Dynamiczny

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

Kotlin

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

Zainicjuj the GoogleFont.Provider za pomocą danych 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
```
Parametry, które otrzymuje dostawca:
- Organ dostawcy czcionek w Google Fonts.
- Pakiet dostawcy czcionek, który służy do weryfikowania tożsamości dostawcy.
- Lista zbiorów skrótów certyfikatów, które służą do weryfikowania tożsamości dostawcy. Skróty wymagane w przypadku dostawcy Google Fonts znajdziesz w pliku font_certs.xml w przykładowej aplikacji Jetchat.

Zdefiniuj a 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 wysyłać zapytania o inne parametry czcionki, takie jak grubość i styl, za pomocą FontWeight i FontStyle odpowiednio:

// ...
 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 do użycia w funkcji typu „composable” Text:

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

Możesz też zdefiniować typografię, aby używać swojego 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ę w motywie aplikacji:

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

Przykład aplikacji, która implementuje czcionki do pobrania w Compose razem z Material3, znajdziesz w przykładowej aplikacji Jetchat.

Dodawanie czcionek zastępczych

Możesz określić łańcuch czcionek zastępczych na wypadek, gdyby nie udało się prawidłowo pobrać czcionki. Jeśli na przykład masz zdefiniowaną 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

Możesz zdefiniować domyślne ustawienia czcionki dla obu grubości 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 FontFamily w ten sposób tworzy FontFamily zawierającą 2 łańcuchy – po jednym dla każdej grubości. Mechanizm wczytywania najpierw spróbuje znaleźć czcionkę online, a potem czcionkę znajdującą się w lokalnym folderze zasobów R.font.

Debugowanie implementacji

Aby sprawdzić, czy czcionka jest pobierana prawidłowo, możesz zdefiniować procedurę obsługi debugowania współprogramu. Procedura obsługi określa, co należy zrobić, jeśli nie uda się asynchronicznie wczytać czcionki.

Zacznij od utworzenia CoroutineExceptionHandler:

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

Przekaż go do metody createFontFamilyResolver , aby resolver używał nowej procedury 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 isAvailableOnDevice od dostawcy, aby sprawdzić, czy dostawca jest dostępny, a certyfikaty są prawidłowo skonfigurowane. Aby to zrobić, możesz wywołać metodę isAvailableOnDevice, która zwraca wartość false, jeśli dostawca jest nieprawidłowo skonfigurowany.

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

Uwagi

Wprowadzenie nowych czcionek w Androidzie zajmuje Google Fonts kilka miesięcy. Istnieje przerwa między dodaniem czcionki w fonts.google.com a jej dostępnością za pomocą interfejsu API czcionek do pobrania (w systemie widoków lub w Compose). Nowo dodane czcionki mogą nie wczytywać się w aplikacji z powodu IllegalStateException. Aby pomóc programistom w identyfikowaniu tego błędu wśród innych typów błędów wczytywania czcionek, dodaliśmy opisowe komunikaty o wyjątku w Compose ze zmianami tutaj. Jeśli napotkasz jakieś problemy, zgłoś je za pomocą narzędzia do śledzenia problemów.

Używanie czcionek zmiennych

Czcionka zmienna to format czcionki, który umożliwia przechowywanie różnych stylów w jednym pliku czcionki. Dzięki czcionkom zmiennym możesz modyfikować osie (lub parametry), aby generować preferowany styl. Osie te mogą być standardowe, takie jak grubość, szerokość, pochylenie i kursywa, lub niestandardowe, które różnią się w zależności od czcionki zmiennej.

5 konfiguracji tego samego kroju pisma zmiennego z różnymi wartościami osi. — **Rysunek 1.** Tekst z użyciem tej samej czcionki zmiennej dostosowanej za pomocą różnych wartości osi.

Używanie czcionek zmiennych zamiast zwykłych plików czcionek pozwala mieć tylko 1 plik czcionki zamiast wielu.

Więcej informacji o czcionkach zmiennych znajdziesz w Google Fonts Knowledge, w całym katalogu dostępnych czcionek zmiennych oraz w tabeli obsługiwanych osi dla każdej czcionki.

Z tego dokumentu dowiesz się, jak zaimplementować czcionkę zmienną w aplikacji Compose.

Wczytywanie czcionki zmiennej

Pobierz czcionkę zmienną, której chcesz użyć (np. Roboto Flex) i umieść ją w folderze app/res/font w aplikacji. Upewnij się, że plik .ttf jest wersją czcionki zmiennej, a nazwa pliku czcionki jest pisana małymi literami i nie zawiera znaków specjalnych.

Uwaga: czcionki zmienne nie są obecnie obsługiwane za pomocą czcionek do pobrania. Najnowsze informacje znajdziesz w tym zgłoszeniu błędu.

Aby wczytać 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 API FontVariation umożliwia konfigurowanie standardowych osi czcionek, takich jak grubość, szerokość i pochylenie. Są to standardowe osie, które są dostępne w każdej czcionce zmiennej. Możesz tworzyć różne konfiguracje czcionki w zależności od tego, gdzie będzie ona używana.

Czcionki zmienne są dostępne tylko w Androidzie O i nowszych, więc dodaj zabezpieczenie i skonfiguruj odpowiednią czcionkę 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 do zbioru stałych, aby ułatwić ich ponowne użycie, i zastąp ustawienia czcionki tymi stałymi:

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

Skonfiguruj typografię Material Design 3 typography, aby używać FontFamily:
```
// 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 displayLarge należy używać w przypadku krótkiego, krytycznego tekstu, ponieważ jest to największy tekst na ekranie.

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

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

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

Na koniec użyj komponentu Text i określ styl jako jeden ze zdefiniowanych stylów 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 komponent Text jest konfigurowany za pomocą stylu motywu Material i zawiera inną konfigurację czcionki zmiennej. Za pomocą MaterialTheme.typography możesz pobrać typografię udostępnioną komponentowi M3 MaterialTheme

3 różne teksty z różnymi konfiguracjami czcionek. — **Rysunek 2.** Czcionka zmienna zastosowana w 3 różnych konfiguracjach.

Używanie osi niestandardowych

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

Wartość tych osi możesz zmienić za pomocą ustawień FontVariation.

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

Aby używać osi niestandardowych, zdefiniuj funkcje dla osi niestandardowych ascenderHeight i 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:
- Określają zabezpieczenia dla wartości, które mogą akceptować. Jak widać w katalogu czcionek zmiennych, ascenderHeight (YTAS) ma wartość minimalną 649f i maksymalną 854f.
- Zwracają ustawienie czcionki, dzięki czemu konfiguracja jest gotowa do dodania do czcionki. W metodzie FontVariation.Setting() nazwa osi (YTAS, XTRA) jest zakodowana na stałe i przyjmuje wartość jako parametr.

Używając osi z konfiguracją czcionki, przekaż dodatkowe parametry do każdej wczytywanej czcionki 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ść małych liter jest teraz większa, a pozostały tekst jest szerszy:

Trzy różne teksty przedstawiające różne konfiguracje czcionek zmiennych z ustawionymi osiami niestandardowymi – niektóre mają wyższe wydłużenia małych liter i są szersze niż wcześniej. — **Rysunek 3.** Tekst z ustawionymi osiami niestandardowymi w czcionkach zmiennych.

Dodatkowe materiały

Więcej informacji znajdziesz w tym poście na blogu o czcionkach zmiennych:

Just your type: Variable fonts in Compose

Polecane dla Ciebie

Uwaga: tekst linku jest wyświetlany, gdy język JavaScript jest wyłączony.
Zasoby w funkcji Compose
Stylizowanie tekstu
Material Design 2 w Compose