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) } }
Özel yazı tipleri ve yazı tipleriyle çalışmak için fontFamily
özelliğini kullanabilirsiniz
res/font
klasöründe tanımlı:
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) )
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) }
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:
- 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") }
- İ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 )
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ı.
- 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) )
Yazı tipiniz için ağırlık ve stil gibi diğer parametreleriFontWeight
veFontStyle
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 ) )
FontFamily
öğesini, Text composable fonksiyonunuzda kullanılan dil:
Text( fontFamily = fontFamily, text = "Hello World!" )
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/*...*/ ), /*...*/ )
Sonra Yazı tipini uygulamanızın temasına ayarlayın:
MyAppTheme( typography = MyTypography )/*...*/
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) )
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) )
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) }
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 ) } }
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!") } }
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.
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
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.Bir değişken yazı tipini yüklemek için
FontFamily
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), ) ) )
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.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 }
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 }
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, /***/ ) )
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çindisplayLarge
.Materyal 3 ile
TextStyle
ve malzemelerin varsayılan değerlerini Yazı tipinizi özelleştirmek içinfontFamily
. Yukarıdaki snippet'teTextStyle
örneklerini her yazı tipi ailesinin yazı tipi ayarlarını özelleştirmek için kullanın.Tipografinizi tanımladığınıza göre, şimdi M3'e (
MaterialTheme
) iletin:MaterialTheme( colorScheme = MaterialTheme.colorScheme, typography = Typography, content = content )
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 ) } } } }
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çinMaterialTheme.typography
MaterialTheme
composable.
Ö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.
Özel eksenler kullanmak için özel
ascenderHeight
vecounterWidth
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()) }
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ğer649f
ve maksimum854f
. - 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.
- Kabul edebilecekleri değerler için kısıtlamalar belirleyin. Gördüğünüz üzere
Değişken yazı tipleri kataloğu,
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 }
Küçük harf üst işaretlerinin yüksekliğinin artık artırıldığına ve diğer metin daha geniştir:
Ek kaynaklar
Daha fazla bilgi için değişken yazı tipleriyle ilgili aşağıdaki blog yayınına bakın:
ziyaret edin.Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Compose'daki kaynaklar
- Metni biçimlendirme
- Compose'da Materyal Tasarım 2