Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

फ़ॉन्ट के साथ काम करें

इस पेज पर, Compose ऐप्लिकेशन में फ़ॉन्ट सेट करने का तरीका बताया गया है.

फ़ॉन्ट सेट करना

Text में fontFamily पैरामीटर होता है. इसकी मदद से, कंपोज़ेबल में इस्तेमाल किया जाने वाला फ़ॉन्ट सेट किया जा सकता है. डिफ़ॉल्ट रूप से, इनमें सेरिफ़, सैंस-सेरिफ़, मोनोस्पेस, और कर्सिव फ़ॉन्ट फ़ैमिली शामिल होती हैं:

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

ये शब्द

res/font फ़ोल्डर में तय किए गए कस्टम फ़ॉन्ट और टाइपफ़ेस के साथ काम करने के लिए, fontFamily एट्रिब्यूट का इस्तेमाल किया जा सकता है:

डेवलपमेंट एनवायरमेंट में res > फ़ॉन्ट फ़ोल्डर को दिखाने वाला ग्राफ़िक

इस उदाहरण में, फ़ॉन्ट फ़ाइलों के आधार पर fontFamily तय करने का तरीका दिखाया गया है और Font फ़ंक्शन का इस्तेमाल किया गया है:

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

इस fontFamily को अपने Text कंपोज़ेबल में पास किया जा सकता है. fontFamily में अलग-अलग वेट शामिल हो सकते हैं. इसलिए, अपने टेक्स्ट के लिए सही वेट चुनने के लिए, fontWeight को मैन्युअल तरीके से सेट किया जा सकता है:

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

ये शब्द

अपने पूरे ऐप्लिकेशन में टाइपोग्राफ़ी सेट करने का तरीका जानने के लिए, Compose में कस्टम डिज़ाइन सिस्टम लेख पढ़ें.

ऐसे फ़ॉन्ट जिन्हें डाउनलोड किया जा सकता है

Compose 1.2.0 से, अपने Compose ऐप्लिकेशन में, डाउनलोड किए जा सकने वाले फ़ॉन्ट के एपीआई का इस्तेमाल किया जा सकता है. इससे Google फ़ॉन्ट एसिंक्रोनस तरीके से डाउनलोड किए जा सकते हैं और उन्हें अपने ऐप्लिकेशन में इस्तेमाल किया जा सकता है.

फ़िलहाल, कस्टम प्रोवाइडर से डाउनलोड किए जा सकने वाले फ़ॉन्ट की सुविधा उपलब्ध नहीं है.

प्रोग्राम के ज़रिए, डाउनलोड किए जा सकने वाले फ़ॉन्ट का इस्तेमाल करना

अपने ऐप्लिकेशन से प्रोग्राम के ज़रिए कोई फ़ॉन्ट डाउनलोड करने के लिए, यह तरीका अपनाएं:

डिपेंडेंसी जोड़ें:

शानदार

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

Kotlin

dependencies {
    ...
    implementation("androidx.compose.ui:ui-text-google-fonts:1.11.3")
}

Google Fonts के क्रेडेंशियल के साथ, GoogleFont.Provider को शुरू करें:
```
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
```
प्रोवाइडर को ये पैरामीटर मिलते हैं:
- Google Fonts के लिए, फ़ॉन्ट प्रोवाइडर अथॉरिटी.
- प्रोवाइडर की पहचान की पुष्टि करने के लिए, फ़ॉन्ट प्रोवाइडर पैकेज.
- प्रोवाइडर की पहचान की पुष्टि करने के लिए, सर्टिफ़िकेट के हैश के सेट की सूची. Jetchat के सैंपल के तौर पर मिले ऐप्लिकेशन में, फ़ाइलfont_certs.xml में, Google Fonts के प्रोवाइडर के लिए ज़रूरी हैश देखे जा सकते हैं.

तय करें: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

आप अपने फ़ॉन्ट के लिए अन्य पैरामीटर के बारे में क्वेरी कर सकते हैं, जैसे वेट और स्टाइल, FontWeight और FontStyle की मदद से:

// ...
 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

अपने Text कंपोज़ेबल फ़ंक्शन में इस्तेमाल किए जाने वाले FontFamily को कॉन्फ़िगर करें:

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

अपने FontFamily का इस्तेमाल करने के लिए, टाइपोग्राफ़ी भी तय की जा सकती है:

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

इसके बाद, अपने ऐप्लिकेशन की थीम के लिए टाइपोग्राफ़ी सेट करें:

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

Compose में, डाउनलोड किए जा सकने वाले फ़ॉन्ट को Material3 के साथ लागू करने वाले ऐप्लिकेशन का उदाहरण देखने के लिए, Jetchat का सैंपल ऐप्लिकेशन देखें.

फ़ॉलबैक फ़ॉन्ट जोड़ना

अगर फ़ॉन्ट सही तरीके से डाउनलोड नहीं होता है, तो उसके लिए फ़ॉलबैक की चेन तय की जा सकती है. उदाहरण के लिए, अगर आपने डाउनलोड किए जा सकने वाले फ़ॉन्ट को इस तरह तय किया है:

// ...
 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

अपने फ़ॉन्ट के लिए, दोनों वेट के लिए डिफ़ॉल्ट इस तरह तय किए जा सकते हैं:

// ...
 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

पक्का करें कि आपने सही इंपोर्ट जोड़े हों.

FontFamily को इस तरह तय करने से, एक FontFamily बनता है, जिसमें दो चेन होती हैं. हर वेट के लिए एक चेन. लोडिंग का तरीका, सबसे पहले ऑनलाइन फ़ॉन्ट को रिज़ॉल्व करने की कोशिश करेगा. इसके बाद, आपके स्थानीय R.font रिसोर्स फ़ोल्डर में मौजूद फ़ॉन्ट को रिज़ॉल्व करने की कोशिश करेगा.

अपने लागू करने की प्रोसेस को डीबग करना

यह पुष्टि करने के लिए कि फ़ॉन्ट सही तरीके से डाउनलोड हो रहा है या नहीं, डीबग कोरोटीन हैंडलर तय किया जा सकता है. आपका हैंडल, एसिंक्रोनस तरीके से फ़ॉन्ट लोड न होने पर, क्या करना है, इसके बारे में जानकारी देता है.

CoroutineExceptionHandler बनाकर शुरू करें:

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

रिज़ॉल्वर को नया हैंडलर इस्तेमाल करने के लिए, इसे createFontFamilyResolver तरीके में पास करें:

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

प्रोवाइडर से, isAvailableOnDevice एपीआई का इस्तेमाल करके यह भी टेस्ट किया जा सकता है कि प्रोवाइडर उपलब्ध है या नहीं और सर्टिफ़िकेट सही तरीके से कॉन्फ़िगर किए गए हैं या नहीं. इसके लिए, isAvailableOnDevice तरीके को कॉल किया जा सकता है. अगर प्रोवाइडर को गलत तरीके से कॉन्फ़िगर किया गया है, तो यह तरीका 'गलत' दिखाता है.

val context = LocalContext.current
LaunchedEffect(Unit) {
    if (provider.isAvailableOnDevice(context)) {
        Log.d(TAG, "Success!")
    }
}TextDownloadableFontsSnippets.kt

सीमाएं

Google Fonts को Android पर नए फ़ॉन्ट उपलब्ध कराने में कई महीने लगते हैं. fonts.google.com में कोई फ़ॉन्ट जोड़े जाने और डाउनलोड किए जा सकने वाले फ़ॉन्ट के एपीआई (View सिस्टम या Compose में) के ज़रिए उपलब्ध होने के बीच समय लगता है. नए जोड़े गए फ़ॉन्ट, आपके ऐप्लिकेशन में IllegalStateExceptionके साथ लोड नहीं हो सकते हैं. डेवलपर को फ़ॉन्ट लोड होने से जुड़ी अन्य गड़बड़ियों के मुकाबले, इस गड़बड़ी की पहचान करने में मदद करने के लिए, हमने यहां दिए गए बदलावों के साथ, Compose में अपवाद के लिए जानकारी देने वाला मैसेज जोड़ा है. अगर आपको कोई समस्या मिलती है, तो समस्या ट्रैकर का इस्तेमाल करके उसकी शिकायत करें.

वैरिएबल फ़ॉन्ट का इस्तेमाल करना

वैरिएबल फ़ॉन्ट, फ़ॉन्ट का एक ऐसा फ़ॉर्मैट है जिसमें एक फ़ॉन्ट फ़ाइल में अलग-अलग स्टाइल शामिल हो सकती हैं. वैरिएबल फ़ॉन्ट की मदद से, अपनी पसंद की स्टाइल जनरेट करने के लिए, ऐक्सिस (या पैरामीटर) में बदलाव किया जा सकता है. ये ऐक्सिस स्टैंडर्ड हो सकते हैं. जैसे, वेट, चौड़ाई, स्लैंट, और इटैलिक. इसके अलावा, ये कस्टम भी हो सकते हैं, जो वैरिएबल फ़ॉन्ट के हिसाब से अलग-अलग होते हैं.

एक ही वैरिएबल फ़ॉन्ट के पांच कॉन्फ़िगरेशन, जिनमें ऐक्सिस की वैल्यू अलग-अलग हैं. — **पहली इमेज.** एक ही वैरिएबल फ़ॉन्ट का इस्तेमाल करके, अलग-अलग ऐक्सिस वैल्यू के साथ पसंद के मुताबिक बनाया गया टेक्स्ट.

सामान्य फ़ॉन्ट फ़ाइलों के बजाय, वैरिएबल फ़ॉन्ट का इस्तेमाल करने से, आपके पास एक से ज़्यादा फ़ॉन्ट फ़ाइलों के बजाय सिर्फ़ एक फ़ॉन्ट फ़ाइल होती है.

वैरिएबल फ़ॉन्ट के बारे में ज़्यादा जानकारी के लिए, Google Fonts की जानकारी, उपलब्ध वैरिएबल फ़ॉन्ट का पूरा कैटलॉग, और हर फ़ॉन्ट के लिए काम करने वाले ऐक्सिस की टेबल देखें.

इस दस्तावेज़ में, Compose ऐप्लिकेशन में वैरिएबल फ़ॉन्ट लागू करने का तरीका बताया गया है.

वैरिएबल फ़ॉन्ट लोड करना

वह वैरिएबल फ़ॉन्ट डाउनलोड करें जिसका आपको इस्तेमाल करना है. उदाहरण के लिए, Roboto Flex इसके बाद, इसे अपने ऐप्लिकेशन के app/res/font फ़ोल्डर में रखें. पक्का करें कि .आपके जोड़े गए ttf फ़ाइल, फ़ॉन्ट का वैरिएबल फ़ॉन्ट वर्शन हो. साथ ही, आपकी फ़ॉन्ट फ़ाइल का नाम पूरी तरह से लोअर केस में हो और उसमें कोई खास वर्ण न हो.

ध्यान दें: फ़िलहाल, डाउनलोड किए जा सकने वाले फ़ॉन्ट के ज़रिए, वैरिएबल फ़ॉन्ट इस्तेमाल नहीं किए जा सकते. इस गड़बड़ी के बारे में, सबसे नए अपडेट देखें.
वैरिएबल फ़ॉन्ट लोड करने के लिए, res/font/ डायरेक्ट्री में मौजूद फ़ॉन्ट का इस्तेमाल करके, FontFamily तय करें:
```
// 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 एपीआई की मदद से, फ़ॉन्ट के स्टैंडर्ड ऐक्सिस कॉन्फ़िगर किए जा सकते हैं. जैसे, वेट, चौड़ाई, और स्लैंट. ये स्टैंडर्ड ऐक्सिस हैं, जो किसी भी वैरिएबल फ़ॉन्ट के साथ उपलब्ध होते हैं. फ़ॉन्ट का इस्तेमाल कहां किया जाएगा, इसके आधार पर, फ़ॉन्ट के अलग-अलग कॉन्फ़िगरेशन बनाए जा सकते हैं.

वैरिएबल फ़ॉन्ट, सिर्फ़ Android के O और इसके बाद के वर्शन के लिए उपलब्ध हैं. इसलिए, एक गार्डरेल जोड़ें और सही फ़ॉलबैक कॉन्फ़िगर करें:

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

सेटिंग को कॉन्स्टैंट के सेट में एक्सट्रैक्ट करें, ताकि उन्हें आसानी से फिर से इस्तेमाल किया जा सके. इसके बाद, फ़ॉन्ट सेटिंग को इन कॉन्स्टैंट से बदलें:

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

टाइपोग्राफ़ी का इस्तेमाल करने के लिए, Material Design 3 को कॉन्फ़िगर करें: FontFamily
```
// Type.kt
val Typography = Typography(
    displayLarge = TextStyle(
        fontFamily = displayLargeFontFamily,
        fontSize = 50.sp,
        lineHeight = 64.sp,
        letterSpacing = 0.sp,
        /***/
    )
)VariableFontsSnippets.kt
```
इस सैंपल में, displayLarge Material 3 टाइपोग्राफ़ी का इस्तेमाल किया गया है. इसमें डिफ़ॉल्ट फ़ॉन्ट सेटिंग और इस्तेमाल के सुझाए गए तरीके अलग-अलग होते हैं. उदाहरण के लिए, छोटे और ज़रूरी टेक्स्ट के लिए, displayLarge का इस्तेमाल करना चाहिए, क्योंकि यह स्क्रीन पर सबसे बड़ा टेक्स्ट होता है.

Material 3 की मदद से, अपनी टाइपोग्राफ़ी को पसंद के मुताबिक बनाने के लिए, TextStyle और fontFamily की डिफ़ॉल्ट वैल्यू बदली जा सकती हैं. ऊपर दिए गए स्निपेट में, हर फ़ॉन्ट फ़ैमिली के लिए फ़ॉन्ट सेटिंग को पसंद के मुताबिक बनाने के लिए, TextStyle के इंस्टेंस कॉन्फ़िगर किए गए हैं.
अब, जबकि आपने अपनी टाइपोग्राफ़ी तय कर ली है, तो इसे M3 MaterialTheme में पास करें:
```
MaterialTheme(
    colorScheme = MaterialTheme.colorScheme,
    typography = Typography,
    content = content
)VariableFontsSnippets.kt
```

आखिर में, Text कंपोज़ेबल का इस्तेमाल करें और तय की गई टाइपोग्राफ़ी स्टाइल में से किसी एक स्टाइल, 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

हर Text कंपोज़ेबल को उसकी मटीरियल थीम की स्टाइल के ज़रिए कॉन्फ़िगर किया जाता है. इसमें वैरिएबल फ़ॉन्ट का अलग-अलग कॉन्फ़िगरेशन होता है. M3 MaterialTheme कंपोज़ेबल को दी गई टाइपोग्राफ़ी को वापस पाने के लिए, MaterialTheme.typography का इस्तेमाल किया जा सकता है.

तीन अलग-अलग टेक्स्ट, जिनमें फ़ॉन्ट के अलग-अलग कॉन्फ़िगरेशन दिखाए गए हैं. — **दूसरी इमेज.** वैरिएबल फ़ॉन्ट को तीन अलग-अलग कॉन्फ़िगरेशन में लागू किया गया है.

कस्टम ऐक्सिस का इस्तेमाल करना

फ़ॉन्ट में कस्टम ऐक्सिस भी हो सकते हैं. इन्हें फ़ॉन्ट फ़ाइल में ही तय किया जाता है. उदाहरण के लिए, Roboto Flex फ़ॉन्ट में असेंडर की ऊंचाई ("YTAS") का ऐक्सिस होता है. इससे लोअर केस के असेंडर की ऊंचाई में बदलाव किया जा सकता है. वहीं, काउंटर की चौड़ाई ("XTRA") से हर अक्षर की चौड़ाई में बदलाव किया जा सकता है.

FontVariation सेटिंग की मदद से, इन ऐक्सिस की वैल्यू बदली जा सकती है.

किसी फ़ॉन्ट के लिए कॉन्फ़िगर किए जा सकने वाले कस्टम ऐक्सिस के बारे में ज़्यादा जानकारी के लिए, हर फ़ॉन्ट के लिए काम करने वाले ऐक्सिस की टेबल देखें.

कस्टम ऐक्सिस का इस्तेमाल करने के लिए, कस्टम ascenderHeight और counterWidth ऐक्सिस के लिए फ़ंक्शन तय करें:
```
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
```
ये फ़ंक्शन, ये काम करते हैं:
- वे वैल्यू तय करते हैं जिन्हें स्वीकार किया जा सकता है. वैरिएबल फ़ॉन्ट के कैटलॉग में देखा जा सकता है कि ascenderHeight (YTAS) की कम से कम वैल्यू 649f और ज़्यादा से ज़्यादा वैल्यू 854f है.
- फ़ॉन्ट सेटिंग दिखाता है, ताकि कॉन्फ़िगरेशन को फ़ॉन्ट में जोड़ा जा सके. FontVariation.Setting() तरीके में, ऐक्सिस का नाम (YTAS, XTRA) हार्डकोड किया जाता है. साथ ही, यह वैल्यू को पैरामीटर के तौर पर लेता है.

फ़ॉन्ट कॉन्फ़िगरेशन के साथ ऐक्सिस का इस्तेमाल करके, लोड किए गए हर 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
}VariableFontsSnippets.kt

ध्यान दें कि अब लोअर केस के असेंडर की ऊंचाई बढ़ गई है और अन्य टेक्स्ट ज़्यादा चौड़ा है:

तीन अलग-अलग टेक्स्ट में, वैरिएबल फ़ॉन्ट के अलग-अलग कॉन्फ़िगरेशन दिखाए गए हैं. इनमें कस्टम ऐक्सिस सेट किए गए हैं. कुछ में छोटे अक्षरों के असेंडर पहले से ज़्यादा हैं और वे पहले से ज़्यादा चौड़े हैं. — **तीसरी इमेज.** वैरिएबल फ़ॉन्ट पर सेट किए गए कस्टम ऐक्सिस दिखाने वाला टेक्स्ट.

अन्य संसाधन

ज़्यादा जानकारी के लिए, वैरिएबल फ़ॉन्ट के बारे में यह ब्लॉग पोस्ट देखें:

Just your type: Variable fonts in Compose

आपके लिए सुझाव

ध्यान दें: JavaScript बंद होने पर, लिंक का टेक्स्ट दिखता है
Compose में संसाधन
टेक्स्ट की स्टाइल सेट करना
Compose में मटीरियल डिज़ाइन 2