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, monospace ve italik 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ı:

Geliştirme ortamındaki res > font klasörünün grafiksel tasviri

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 bileşeninize 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 yazı tipini nasıl ayarlayacağınızı öğrenmek için Oluşturma'daki özel tasarım sistemleri başlıklı makaleyi inceleyin.

İndirilebilir yazı tipleri

Oluştur 1.2.0 sürümünden itibaren, Google yazı tiplerini asenkron olarak indirip uygulamanızda kullanmak için Oluştur uygulamanızdaki indirilebilir yazı tipleri API'sini 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:
    GroovyKotlin
    dependencies {
    ...
    implementation "androidx.compose.ui:ui-text-google-fonts:1.7.8"
}
    dependencies {
    ...
    implementation("androidx.compose.ui:ui-text-google-fonts:1.7.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 yazı tipi sağlayıcı paketi.
    • Sağlayıcının kimliğini doğrulamak için sertifikalara ait karma oluşturma dizisi listesi. Google Fonts sağlayıcısı için gereken karma oluşturma işlemlerini, Jetchat örnek uygulamasındaki font_certs.xml dosyasında bulabilirsiniz.
  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ı tipinizle ilgili diğer parametreleri (ör. kalınlık ve stil) FontWeight ve FontStyle ile sorgulayabilirsiniz: 
    // ...
 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 değerini, metin derlenebilir işlevinizde kullanılacak şekilde yapılandırın:

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

Ardından, yazı tipini uygulamanızın temasına göre 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ımlamak, ağırlık başına bir tane olmak üzere iki zincir içeren bir FontFamily oluşturur. 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ızda hata ayıklama

Yazı tipinin doğru şekilde indirilip indirilmediğini doğrulamanıza yardımcı olması için bir hata ayıklama coroutine işleyicisi tanımlayabilirsiniz. Herkese açık kullanıcı adınız, yazı tipi eşzamanlı olarak yüklenemediğinde ne yapılacağını belirtir.

Öncelikle CoroutineExceptionHandler:

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

Çözümleyicinin yeni işleyiciyi kullanması için bunu createFontFamilyResolver yöntemine iletin:

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. Bunu yapmak için sağlayıcı yanlış yapılandırılmışsa yanlış değerini döndüren isAvailableOnDevice yöntemini çağırabilirsiniz.

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, uygulamanızda IllegalStateException ile yüklenmeye çalışabilir. 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ı tiplerini kullanma

Değişken yazı tipi, bir yazı tipi dosyasının farklı stiller içermesine olanak tanıyan bir yazı tipi biçimidir. 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. Farklı eksen değerleriyle özelleştirilmiş aynı değişken yazı tipini kullanan metin.

Normal yazı tipi dosyaları yerine değişken yazı tipleri kullandığınızda birden fazla yerine tek bir yazı tipi dosyanız olur.

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üman, Compose uygulamanızda bir değişken yazı tipini nasıl uygulayacağınızı gösterir.

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. .Eklediğiniz ttfdosyasının yazı tipinin değişken yazı tipi sürümü olduğundan ve yazı tipi dosyanızın adının tamamen küçük harflerden oluştuğundan ve özel karakter içermediğinden emin olun.

  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, kalınlık, genişlik ve eğik gibi standart yazı tipi eksenlerini yapılandırmanıza olanak tanır. 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 kullanmak için ayarları bir dizi sabit değere ayıklayın ve yazı tipi ayarlarını bu sabit değerlerle değiştirin:

    // 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 tipografisini 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ğu için kısa ve kritik metinler için displayLarge kullanmanız gerekir.

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

  6. Yazı tipinizi tanımladığınıza göre M3'e iletin MaterialTheme:

    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.

Hepsi 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ı tipinde, küçük harf tırmanıcılarının yüksekliğini ayarlayan tırmanıcı yüksekliği ("YTAS") ekseni, her harfin genişliğini ayarlayan karşı genişlik ("XTRA") ekseni bulunur.

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 için her yazı tipinin desteklenen eksenler tablosuna bakın.

  1. Özel eksenler kullanmak için özel ascenderHeight ve counterWidth eksenleri için işlevler tanımlayın:

    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ı geri döndürün. İçinde FontVariation.Setting() yöntemi, eksen adı (YTAS, XTRA) koddur ve değeri parametre olarak alır.

  2. Yazı tipi yapılandırmasıyla eksenleri kullanarak, yüklenen her Font için ek parametreler iletin:

    @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:

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 ayarlanan ö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:

Şu anda öneri yok.

Google Hesabınızda deneyin.