Yazı tipleriyle çalışma

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

Yazı tipini ayarla

Text, composable'da kullanılan yazı tipinin ayarlanmasına izin veren bir fontFamily parametresi içerir. Varsayılan olarak, serif, sans-serif, tek aralıklı ve el yazısı yazı tipi aileleri dahildir:

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

Kelimeler

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

Geliştirme ortamındaki res > yazı tipi klasörünün grafik gösterimi

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

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. fontFamily farklı ağırlıklar içerebileceğinden metniniz için doğru ağırlığı seçmek üzere fontWeight öğesini manuel olarak ayarlayabilirsiniz:

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 1.2.0'dan itibaren Google yazı tiplerini eşzamansız olarak indirmek ve uygulamanızda kullanmak için Compose 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:

    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. Google Fonts kimlik bilgileriyle GoogleFont.Provider kodunu başlatı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.
    • Sağlayıcının kimliğini doğrulamak amacıyla sertifikalar için karma gruplarının listesi. Google Fonts sağlayıcısı için gereken karmaları Jetchat örnek uygulamasındaki font_certs.xml dosyasında bulabilirsiniz.
  3. FontFamily tanımlayın: 
    // ...
 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 FontWeight ve FontStyle ile ağırlık ve stil gibi diğer parametreleri sırasıyla 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. Text composable işlevinizde kullanılacak FontFamily öğesini yapılandırın:

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

FontFamily öğenizi kullanmak için Yazı biçimi de tanımlayabilirsiniz:

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

Material3 ile birlikte Compose'da indirilebilir yazı tiplerini uygulayan bir uygulama örneği için Jetchat örnek uygulamasına bakın.

Yedek yazı tipleri ekleme

Yazı tipinin düzgün indirilememesi ihtimaline karşı yazı tipiniz için bir yedek zinciri belirleyebilirsiniz. Örneğin, indirilebilir yazı tipiniz şu şekilde tanımlanmışsa:

// ...
 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 ağırlık başına bir tane olmak üzere iki zincir içeren bir FontFamily oluşturulur. Yükleme mekanizması, önce online yazı tipini, ardından yerel R.font kaynak klasörünüzde bulunan yazı tipini çözmeye çalışır.

Uygulamanızdaki hataları ayıklama

Yazı tipinin doğru şekilde indirilip indirilmediğini doğrulamanıza yardımcı olması için bir hata ayıklama eş anlamlı işleyicisi tanımlayabilirsiniz. Herkese açık kullanıcı adınız, yazı tipinin eşzamansız olarak yüklenememesi durumunda yapılması gerekenleri belirtir.

Bir CoroutineExceptionHandler oluşturarak başlayın:

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

Çözümleyicinin yeni işleyiciyi kullanmasını sağlamak için kodu createFontFamilyResolver yöntemine iletin:

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

Sağlayıcının kullanılabilir olup olmadığını ve sertifikaların doğru şekilde yapılandırılıp yapılandırılmadığını test etmek için sağlayıcıdan isAvailableOnDevice API'yi de kullanabilirsiniz. Bunu yapmak için sağlayıcı yanlış yapılandırılmışsa false (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 sitesine eklenmesi ile indirilebilir yazı tipleri API'si (View (View) veya Compose'da) üzerinden kullanıma sunulması arasında zaman farkı var. Yeni eklenen yazı tipleri, uygulamanıza IllegalStateException ile yüklenemeyebilir. Geliştiricilerin bu hatayı diğer yazı tipi yükleme hataları türleri arasında tanımlamasına yardımcı olmak amacıyla, değişiklikleri burada yaparak Compose'a istisna için açıklayıcı mesajlar ekledik. Herhangi bir sorun bulursanız sorun izleyiciyi kullanarak bunları bildirin.

Değişken yazı tipleri 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, tercih ettiğiniz stili oluşturmak için eksenleri (veya parametreleri) değiştirebilirsiniz. Bu eksenler ağırlık, genişlik, eğim ve italik gibi standart veya özel (değişken yazı tiplerine göre) eksenler olabilir.

Aynı değişken yazı tipine ve farklı eksen değerlerine sahip beş yapılandırma.
Şekil 1. Aynı değişken yazı tipinin kullanıldığı, farklı eksen değerleriyle özelleştirilmiş metin.

Normal yazı tipi dosyaları yerine değişken yazı tiplerini kullanmak, birden fazla yerine yalnızca bir yazı tipi dosyanıza sahip olmanızı sağlar.

Değişken yazı tipleri hakkında daha fazla bilgi için Google Fonts Bilgisi'ne, kullanılabilir değişken yazı tiplerinin tamamına ve her yazı tipine ilişkin desteklenen eksenlere ilişkin bir tabloya bakın.

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 (örneğin, 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 adı tamamen küçük harftir ve özel karakter içermez.

  2. Değişken yazı tipi yüklemek için res/font/ dizinine yerleştirilmiş yazı tipini kullanarak bir FontFamily tanımlayın:

    // 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ğırlık, genişlik ve eğim gibi standart yazı tipi eksenlerini yapılandırmanıza olanak tanır. Bunlar, herhangi bir değişken yazı tipiyle kullanılabilen standart eksenlerdir. Yazı tipinin kullanılacağı yere bağlı olarak yazı tipinin farklı yapılandırmalarını oluşturabilirsiniz.

  3. Değişken yazı tipleri yalnızca Android O ve sonraki sürümlerde kullanılabilir. Bu nedenle, bir koruma önlemi ekleyip 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 yazı tipi ayarlarını şu 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 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ı varsayılan yazı tipi ayarlarına ve önerilen kullanımlara sahip displayLarge Materyal 3 tipografi kullanılmaktadır. Örneğin, ekrandaki en büyük metin olduğundan kısa ve kritik metinler için displayLarge kullanmalısınız.

    Materyal 3 ile tipografinizi özelleştirmek için TextStyle ve fontFamily varsayılan değerlerini değiştirebilirsiniz. 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. 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ımlanan tipografi stillerinden biriyle (MaterialTheme.typography.displayLarge) belirtin:

    @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ı stiliyle yapılandırılır ve farklı bir değişken yazı tipi yapılandırmasına sahiptir. M3 MaterialTheme composable'a sağlanan tipografiyi almak için MaterialTheme.typography kullanabilirsiniz.

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 artan yüksekliği ("YTAS") ekseni vardır. Bu eksen, küçük harfli artan öğelerin yüksekliğini ayarlarken sayaç genişliği ("XTRA") 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 istiyorsanız her yazı tipine ait desteklenen eksenler tablosuna göz atın.

  1. Özel eksenler kullanmak için özel ascenderHeight ve counterWidth eksenlerinin işlevlerini 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. Değişken yazı tipleri kataloğunda görebileceğiniz gibi, ascenderHeight (YTAS) en az 649f, en fazla 854f değerine sahiptir.
    • Yapılandırmanın yazı tipine eklenmeye hazır olması için yazı tipi ayarını döndürün. FontVariation.Setting() yönteminde, eksen adı (YTAS, XTRA) koda gömülür ve bu değeri parametre olarak alır.

  2. Eksenleri yazı tipi yapılandırmasıyla birlikte 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 harfli artan harflerin yüksekliğinin artırıldığına ve diğer metnin daha geniş olduğuna dikkat 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: