Yazı tipleriyle çalışma

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

Yazı tipi ayarlama

Text, bileşiğe kullanılan yazı tipini ayarlamaya olanak tanıyan bir fontFamily parametresine sahiptir. 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

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

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

Bu örnekte, bu yazı tipi dosyalarına göre ve Font işlevini kullanarak nasıl fontFamily 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 kompozisyonunuza iletebilirsiniz. Bir fontFamily farklı ağırlıklar içerebileceğinden, metninize uygun ağırlığı seçmek için fontWeight'yi 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 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ızda 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ızdan programatik olarak indirmek için aşağıdaki adımları uygulayın:

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

    Groovy

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

    Kotlin

    dependencies {
    ...
    implementation("androidx.compose.ui:ui-text-google-fonts:1.7.5")
}
  2. GoogleFont.Provider sınıfını 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 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 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ı tipinizle ilgili kalınlık ve stil gibi diğer parametreleri 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

FontFamily'nizi kullanmak için Yazı biçimi'ni de tanımlayabilirsiniz:

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

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

Yedek yazı tipleri ekleme

Yazı tipi düzgün şekilde indirilemediğinde yazı tipiniz için yedek bir zincir 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

Yazı tipinizin varsayılanlarını her iki ağırlık için de ş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 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ı, önce online yazı tipini, ardından yerel R.font kaynak klasörünüzdeki yazı tipini çözmeye çalışır.

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.

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ı 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 kullanılabilir olup olmadığını ve sertifikalarının doğru şekilde yapılandırılıp yapılandırılmadığını test etmek için sağlayıcının isAvailableOnDevice API'sini de kullanabilirsiniz. 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 Yazı Tipleri'nin yeni yazı tiplerini Android'de kullanıma sunması birkaç ay sürer. Bir yazı tipinin fonts.google.com adresine eklenmesi ile indirilebilir yazı tipleri API'si (Görüntüleme sisteminde veya Oluşturma'da) üzerinden kullanıma sunulması arasında zaman farkı vardır. Yeni eklenen yazı tipleri, uygulamanızda IllegalStateException ile yüklenmeye çalışabilir. Geliştiricilerin bu hatayı diğer yazı tipi yükleme hatalarından ayırt etmesine yardımcı olmak için, Oluştur'daki istisna için açıklayıcı mesajlar ekledik. Bu değişiklikleri buradan inceleyebilirsiniz. Sorunla karşılaşırsanız sorun izleyiciyi kullanarak bildirin.

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, tercih ettiğiniz stili oluşturmak için eksenleri (veya parametreleri) değiştirebilirsiniz. Bu eksenler kalınlık, genişlik, eğiklik ve italik gibi standart veya değişken yazı tipleri arasında farklılık gösteren özel olabilir.

Farklı eksen değerlerine sahip aynı değişken yazı tipinin beş yapılandırması.
Ş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 yazı tipi dosyası yerine yalnızca bir yazı tipi dosyası kullanabilirsiniz.

Değişken yazı tipleri hakkında daha fazla bilgi için Google Fonts Bilgi, mevcut değişken yazı tiplerinin tüm kataloğu ve her yazı tipi için desteklenen eksenlerin tablosunu inceleyin.

Bu dokümanda, Oluştur uygulamanıza değişken yazı tipini nasıl uygulayacağınız gösterilmektedir.

Değişken yazı tipi yükleme

  1. Kullanmak istediğiniz değişken yazı tipini (ör. Roboto Flex) indirip 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. 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, kalınlık, genişlik ve eğik gibi standart yazı tipi eksenlerini yapılandırmanıza olanak tanır. Bunlar, tüm değişken yazı tiplerinde kullanılabilen standart eksenlerdir. Yazı tipinin kullanılacağı yere göre yazı tipi için farklı yapılandırmalar oluşturabilirsiniz.

  3. Değişken yazı tipleri yalnızca Android O ve sonraki sürümlerde kullanılabilir. Bu nedenle, bir koruma çubuğu 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. Ayarların daha kolay yeniden kullanılabilmesi 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ı varsayılan yazı tipi ayarlarına ve önerilen kullanım alanlarına sahip displayLarge Material 3 yazı tipi kullanılmaktadır. Örneğin, ekrandaki en büyük metin olduğu için kısa ve kritik metinler için displayLarge kullanmanız gerekir.

    Material 3 ile yazı tipinizi özelleştirmek için TextStyle ve fontFamily'nin 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. 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 bileşeni kullanın ve stili, tanımlanmış yazı tipi stillerinden biri olan MaterialTheme.typography.displayLarge olarak 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 bileşeni, Material temasının stili aracılığıyla yapılandırılır ve farklı bir değişken yazı tipi yapılandırması içerir. M3MaterialTheme composable'ına sağlanan yazı tipini almak için MaterialTheme.typography öğesini kullanabilirsiniz.

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

Özel eksenler kullanma

Yazı tiplerinde özel eksenler 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 tablosunu inceleyin.

  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 sınırlar belirleyin. Değişken yazı tipleri kataloğunda görebileceğiniz gibi, ascenderHeight (YTAS) için minimum değer 649f, maksimum değer ise 854f'tir.
    • Yapılandırmanın yazı tipine eklenmeye hazır olması için yazı tipi ayarını geri döndürün. FontVariation.Setting() yönteminde, eksen adı (YTAS, XTRA) sabit kodlanır 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 harflerin üst çıkıntılarının yüksekliğinin arttığını ve diğer metnin daha geniş olduğunu görebilirsiniz:

Özel eksenler ayarlanmış değişken yazı tipleri için farklı yapılandırmaları gösteren üç farklı metin. Bazılarında küçük harflerin tırnak uçları daha yüksek ve öncekinden daha geniş.
Şekil 3. Değişken yazı tiplerinde ayarlanan özel eksenleri gösteren metin.

Ek kaynaklar

Daha fazla bilgi için değişken yazı tipleri hakkındaki şu blog yayınını inceleyin: