Yazı tipleriyle çalışma

Bu sayfada, Compose uygulamanızda yazı tiplerini nasıl ayarlayacağınız açıklanmaktadır.

Yazı tipini ayarla

Text,fontFamily composable'dan bahsetmek istiyorum. Varsayılan olarak, serif, sans-serif, tek aralıklı ve steno yazı tipi aileleri dahildir:

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

Kelimeler

Özel yazı tipleri ve yazı tipleriyle çalışmak için fontFamily özelliğini kullanabilirsiniz res/font klasöründe tanımlı:

Çözünürlüklerin grafik gösterimi > geliştirme ortamındaki yazı tipi klasörü

Bu örnekte, bu yazı tipine göre bir fontFamily öğesini nasıl tanımlayacağınız gösterilmektedir dosyalarını oluşturup Font işlevini kullanarak:

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

Bu fontFamily öğesini Text composable'ınıza iletebilirsiniz. Çünkü fontFamily farklı ağırlıklar içerebilir. fontWeight değerini manuel olarak şu değere ayarlayabilirsiniz: metniniz için doğru ağırlığı seçin:

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

Kelimeler

Uygulamanızın tamamında tipografiyi nasıl ayarlayacağınızı öğrenmek için Compose'da özel tasarım sistemleri bölümüne bakın.

İndirilebilir yazı tipleri

Compose'da başlıyor 1.2.0, Compose uygulamanızdaki indirilebilir yazı tipleri API'sini kullanarak Google yazı tiplerini eşzamansız olarak kullanabilir ve uygulamanızda kullanabilirsiniz.

Özel sağlayıcılar tarafından sağlanan indirilebilir yazı tipleri şu anda desteklenmemektedir.

İndirilebilir yazı tiplerini programatik olarak kullanma

Bir yazı tipini uygulamanızın içinden programlı olarak indirmek için aşağıdaki adımları izleyin:

  1. Bağımlılığı ekleyin:

    Eski

    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")
}
  2. İlk kullanıma hazırla GoogleFont.Provider şu kimlik bilgilerini kullanın: 
    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
    Sağlayıcının aldığı parametreler şunlardır:
    • Google Fonts için yazı tipi sağlayıcı yetkilisi.
    • Sağlayıcının kimliğini doğrulamak için kullanılan yazı tipi sağlayıcı paketi.
    • Sertifikaların kimliğini doğrulamak için karma gruplarının listesi sağlar. Google Fonts sağlayıcısı için gereken karmaları bulabilirsiniz. font_certs.xml dosyasında Jetchat örnek uygulaması.
  3. Bir 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
    Yazı tipiniz için ağırlık ve stil gibi diğer parametreleri FontWeight ve FontStyle oluşturmak için: 
    // ...
 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. FontFamily öğesini, Text composable fonksiyonunuzda kullanılan dil:

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

Ayrıca Ürün İş Listesi’ndeki Kullanılacak yazı biçimi FontFamily cihazınız:

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/*...*/
    ),
    /*...*/
)
TextDownloadableFontsSnippets.kt

Sonra Yazı tipini uygulamanızın temasına ayarlayın:

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

Compose'da indirilebilir yazı tipleri kullanan bir uygulama örneği Material3 ile birlikte Jetchat örnek uygulamasına göz atın.

Yedek yazı tipleri ekleme

Yazı tipinin başarısız olma ihtimaline karşı yazı tipiniz için bir yedek zinciri belirleyebilirsiniz. düzgün şekilde indiremezsiniz. Örneğin, indirilebilir yazı tipinizi tanımlarsanız aşağıdaki gibidir:

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

Her iki ağırlık için de yazı tipiniz için varsayılanları aşağıdaki gibi tanımlayabilirsiniz:

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

Doğru içe aktarma işlemlerini eklediğinizden emin olun.

FontFamily bu şekilde tanımlandığında iki zincir içeren bir FontFamily oluşturulur, ağırlık başına bir tane. Yükleme mekanizması öncelikle çevrimiçi yazı tipini çözmeye çalışır. ve yerel R.font kaynak klasörünüzde bulunan yazı tipini seçin.

Uygulamanızdaki hataları ayıklama

Yazı tipinin doğru indirilip indirilmediğini doğrulamanıza yardımcı olması için hata ayıklama eş yordam işleyicisi. Herkese açık kullanıcı adınız, belirli bir sorunla karşılaşılması durumunda Yazı tipi eşzamansız olarak yüklenemiyor.

Öncelikle CoroutineExceptionHandler:

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

Bunu şuraya geçirin: createFontFamilyResolver yöntemini kullanın:

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

Ayrıca şunu da kullanabilirsiniz: isAvailableOnDevice API'nin sağlayıcı mevcut olup olmadığını ve sertifikaların mevcut olup olmadığını yapılandırdığınızdan emin olun. Bunun için isAvailableOnDevice yöntemini çağırabilirsiniz. değeri false (yanlış) değerini döndürür.

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

Uyarılar

Google Fonts'un yeni yazı tiplerinin Android'de kullanıma sunulması birkaç ay sürer. Bir yazı tipinin fonts.google.com adresinde de bulabilirsiniz indirilebilir yazı tipleri API'sini kullanın (View sisteminde veya Compose'da). Yeni eklenen yazı tipleri IllegalStateException. Geliştiricilerin bu hatayı diğer yazı tipi yükleme hataları yerine belirlemelerine yardımcı olmak için Compose'a değişikliklerle birlikte açıklayıcı bir mesaj ekledik. burada bulabilirsiniz. Herhangi bir sorun bulursanız sorunu kullanarak bildirin İzleyici.

Değişken yazı tipleri kullanma

Değişken yazı tipi, bir yazı tipi dosyasının farklı stillerini ayarlayın. Değişken yazı tipleriyle, eksenleri (veya parametreleri) değiştirerek tercih ettiğiniz stili seçin. Bu eksenler ağırlık, genişlik, eğim, ve değişken yazı tipleri arasında farklılık gösteren italik veya özelleştirilebilir.

Aynı değişken yazı tipine ve farklı eksen değerlerine sahip beş yapılandırma.
Şekil 1. Aynı değişken yazı tipini kullanan, farklı eksenle özelleştirilmiş metin değerleridir.

Normal yazı tipi dosyaları yerine değişken yazı tiplerini kullanmak yalnızca bir yazı tipi dosyası kullanmanız önerilir.

Değişken yazı tipleri hakkında daha fazla bilgi için Google Fonts Bilgi, mevcut içeriklerin kataloğunun tamamı değişken yazı tipleri ve her biri için desteklenen eksenlerin bir tablosu yazı tipi.

Bu dokümanda, Compose uygulamanızda bir değişken yazı tipini nasıl uygulayacağınız açıklanmaktadır.

Değişken yazı tipi yükleme

  1. Kullanmak istediğiniz değişken yazı tipini (ör. Roboto Flex) indirin ve uygulamanızdaki app/res/font klasörüne yerleştirin. .ttf. dosyası, yazı tipinin değişken yazı tipi sürümüdür ve yazı tipi dosyanızın tamamı küçük harf olmalı ve özel karakter içermemelidir.

  2. Bir değişken yazı tipini yüklemek içinFontFamily res/font/ dizini:

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

    FontVariation API, aşağıdaki gibi standart yazı tipi eksenlerini yapılandırmanıza olanak tanır: ağırlık, genişlik ve eğim. Bunlar, tablodaki herhangi bir değişken yazı tipiyle kullanılabilir. Her bir kullanılacak yere göre yazı tipi seçin.

  3. Değişken yazı tipleri yalnızca Android O ve sonraki sürümlerde kullanılabilir. Bu nedenle, güvenlik önlemi alın ve uygun bir yedek yapılandırın:

    // 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. Daha kolay yeniden kullanım için ayarları bir sabit değer grubuna çıkarın ve aşağıdaki sabit değerlere sahip yazı tipi ayarları:

    // 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. Materyal Tasarım 3 yazı tipini FontFamily kullanacak şekilde yapılandırın:

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

    Bu örnekte, farklı olan displayLarge Material 3 tipografi kullanılmaktadır varsayılan yazı tipi ayarlarını ve önerilen kullanımları görebilirsiniz. Örneğin, Ekrandaki en büyük metin olduğundan, kısa ve önemli metinler için displayLarge.

    Materyal 3 ile TextStyle ve malzemelerin varsayılan değerlerini Yazı tipinizi özelleştirmek için fontFamily. Yukarıdaki snippet'te TextStyle örneklerini her yazı tipi ailesinin yazı tipi ayarlarını özelleştirmek için kullanın.

  6. Tipografinizi tanımladığınıza göre, şimdi M3'e (MaterialTheme) iletin:

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

  7. Son olarak, bir Text composable kullanın ve stili, tanımlanmış tipografi stilleri, 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

    Her Text composable, Materyal temasının stili ve farklı bir değişken yazı tipi yapılandırması içerir. Tekliflerinizi otomatikleştirmek ve optimize etmek için M3'e sağlanan yazı tipini almak için MaterialTheme.typography MaterialTheme composable.

ziyaret edin.
Her biri farklı yazı tipi yapılandırmalarını gösteren üç farklı metin.
Şekil 2. Değişken yazı tipi, üç farklı yapılandırmaya uygulandı.

Özel eksenler

Yazı tiplerinin özel eksenleri de olabilir. Bunlar yazı tipi dosyasının içinde tanımlanır. Örneğin, Roboto Flex yazı tipinin üst yüksekliği ("YTAS") ekseni vardır. küçük harf üstlerinin yüksekliğini ayarlarken sayaç genişliğini ("XTRA") ayarlar her bir harfin genişliğini ayarlar.

Bu eksenlerin değerini FontVariation ayarlarıyla değiştirebilirsiniz.

Bir yazı tipi için yapılandırabileceğiniz özel eksenler hakkında daha fazla bilgi edinmek için desteklenen eksenler tablosunu inceleyin.

  1. Özel eksenler kullanmak için özel ascenderHeight ve counterWidth eksen:

    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

    Bu işlevler şunları yapar:

    • Kabul edebilecekleri değerler için kısıtlamalar belirleyin. Gördüğünüz üzere Değişken yazı tipleri kataloğu, ascenderHeight (YTAS) bir minimum değer 649f ve maksimum 854f.
    • Yapılandırmanın yazı tipine eklenmeye hazır olması için yazı tipi ayarını döndürün. İçinde FontVariation.Setting() yöntemi, eksen adı (YTAS, XTRA) koddur ve değeri parametre olarak alır.

  2. Eksenleri yazı tipi yapılandırmasıyla birlikte kullanarak yüklenen her 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

    Küçük harf üst işaretlerinin yüksekliğinin artık artırıldığına ve diğer metin daha geniştir:

ziyaret edin.
Değişken yazı tipleri için farklı yapılandırmalar gösteren ve özel eksenler belirlenmiş üç farklı metin. Bazı metinlerin küçük harfli artan işaretleri öncekinden daha geniştir.
Şekil 3. Değişken yazı tiplerinde ayarlanmış özel eksenleri gösteren metin.

Ek kaynaklar

Daha fazla bilgi için değişken yazı tipleriyle ilgili aşağıdaki blog yayınına bakın:

ziyaret edin. ziyaret edin.