Yazı tipleriyle çalışma

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

Yazı tipini ayarla

Text, composable içinde kullanılan yazı tipinin ayarlanmasına olanak tanıyan bir fontFamily parametresine sahiptir. 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ında res > yazı tipi klasörünün grafiksel tasviri

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 Oluşturma uygulamasında özel tasarım sistemleri başlıklı makaleyi inceleyin.

İndirilebilir yazı tipleri

Compose 1.2.0'dan itibaren Compose uygulamanızdaki indirilebilir yazı tipleri API'sini kullanarak Google yazı tiplerini eşzamansız olarak indirip 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 programatik olarak indirmek için aşağıdaki adımları uygulayın:

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

    Modern

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

    Kotlin

    dependencies {
    ...
    implementation("androidx.compose.ui:ui-text-google-fonts:1.6.1")
}
  2. GoogleFont.Provider öğesini Google Fonts kimlik bilgileriyle 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ılacak yazı tipi sağlayıcı paketi.
    • Sağlayıcının kimliğini doğrulamak için kullanılan sertifikaların 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
    FontWeight ve FontStyle ile sırasıyla ağırlık ve stil gibi diğer parametreleri sırayla 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

Ardından yazı tipini uygulamanızın temasına ayarlayın:

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

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

Yedek yazı tipleri ekle

Yazı tipinin düzgün indirilemediği durumlarda yazı tipiniz için bir yedek zinciri belirleyebilirsiniz. Örneğin, indirilebilir yazı tipinizi şu şekilde tanımladıysanız:

// ...
 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 yazı tipinize ilişkin varsayılanları şu şekilde 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 aktarmaları eklediğinizden emin olun.

FontFamily özelliğinin bu şekilde tanımlanması, ağırlık başına bir adet olmak üzere iki zincir içeren bir FontFamily oluşturur. Yükleme mekanizması önce çevrimiçi yazı tipini, ardından yerel R.font kaynak klasörünüzde bulunan yazı tipini çözümlemeye çalışır.

Uygulamanızdaki hataları ayıklayın

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

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

Sağlayıcının müsait 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ının sunduğu isAvailableOnDevice API'yi de kullanabilirsiniz. Bunu yapmak için sağlayıcı yanlış yapılandırılmışsa false 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ı tiplerini Android'de kullanıma sunması birkaç ayı bulabilir. Bir yazı tipinin fonts.google.com adresine eklendiği zaman ile indirilebilir fontlar API'si (View sisteminde veya Compose'da) aracılığıyla kullanılabilir olduğu zaman arasında bir boşluk vardır. Yeni eklenen yazı tipleri uygulamanıza IllegalStateException simgesiyle yüklenmeyebilir. Geliştiricilerin bu hatayı diğer yazı tipi yükleme hataları yerine tanımlamasına yardımcı olmak amacıyla Compose'daki istisna için buradaki değişiklikleri içeren açıklayıcı mesajlar ekledik. Herhangi bir sorunla karşılaşırsanı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çermesini sağlayan 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, değişken yazı tiplerine göre farklılık gösteren ağırlık, genişlik, eğim ve italik gibi standart veya özel olabilir.

Farklı eksen değerlerine sahip aynı değişken yazı tipine 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 kullanmak, birden çok yerine yalnızca bir yazı tipi dosyasına sahip olmanıza olanak tanır.

Değişken yazı tipleri hakkında daha fazla bilgi için Google Yazı Tipleri Bilgisi'ne, kullanılabilir değişken yazı tiplerinin tamamına ve her bir yazı tipi için desteklenen eksenlerin tablosuna bakın.

Bu dokümanda, Compose uygulamanızda değişken yazı tipinin nasıl uygulanacağı gösterilmektedir.

Değişken yazı tipi yükleme

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

  2. Değişken yazı tipi yüklemek için res/font/ dizinine yerleştirilen 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ılabilecek standart eksenlerdir. Yazı tipinin kullanılacağı yere göre farklı yazı tipi yapılandırmaları oluşturabilirsiniz.

  3. Değişken yazı tipleri yalnızca Android O ve üzeri sürümlerde kullanılabilir. Bu nedenle bir koruma ekleyin 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 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 Material 3 tipografisi kullanılıyor. Örneğin, ekrandaki en büyük metin olduğundan kısa ve önemli metinler için displayLarge kullanmanız gerekir.

    Materyal 3 ile tipografinizi özelleştirmek için TextStyle ve fontFamily varsayılan değerlerini değiştirebilirsiniz. Yukarıdaki snippet'te her bir 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, M3'e MaterialTheme aktarın:

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

  7. Son olarak, bir Text composable kullanın ve stili, tanımlanan tipografi stillerinden (MaterialTheme.typography.displayLarge) birinde 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ının stiliyle yapılandırılır ve farklı bir değişken yazı tipi yapılandırması içerir. M3 MaterialTheme composable'ına sağlanan yazı tipini almak için MaterialTheme.typography kullanabilirsiniz.

Hepsi farklı yazı tipi yapılandırmalarını gösteren üç farklı metin.
Şekil 2. Değişken yazı tipi üç farklı yapılandırmada uygulandı.

Özel eksenler kullanma

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 bu eksende küçük harf yükselticilerin yüksekliğini ayarlar. Sayaç genişliği ("XTRA") ise 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 her bir yazı tipinin desteklenen eksenler tablosuna bakın.

  1. Özel eksenler kullanmak için özel ascenderHeight ve counterWidth eksenlerine yönelik 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 aşağıdakileri yapar:

    • Kabul edebilecekleri değerler için kısıtlamalar belirleyin. Değişken yazı tipleri kataloğunda görebileceğiniz gibi ascenderHeight (YTAS), minimum 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) kodu sabittir ve değeri parametre olarak alır.

  2. Yazı tipi yapılandırması ile eksenleri kullanarak yüklenen her Font öğesine 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 artık arttığını, diğer metnin ise daha geniş olduğunu görebilirsiniz:

Değişken yazı tipleri için farklı yapılandırmalar gösteren, özel eksenler ayarlanmış üç farklı metin. Bazılarının harfleri daha yüksek, artan harfleri eskisinden daha geniştir.
Şekil 3. Değişken yazı tiplerine 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: