আপনার Compose অ্যাপে কীভাবে ফন্ট সেট করবেন তা এই পৃষ্ঠায় বর্ণনা করা হয়েছে।
ফন্ট সেট করা
Text-এ fontFamily প্যারামিটার আছে যা কম্পোজ করার উপযুক্ত আইটেমে ব্যবহৃত ফন্ট সেট করার অনুমতি দেয়।
ডিফল্ট হিসেবে, সেরিফ, সেরিফ ছাড়া, মোনোস্পেস ও কার্সিভ ফন্ট ফ্যামিলি
অন্তর্ভুক্ত থাকে:
@Composable fun DifferentFonts() { Column { Text("Hello World", fontFamily = FontFamily.Serif) Text("Hello World", fontFamily = FontFamily.SansSerif) } }
res/font ফোল্ডারে সংজ্ঞায়িত কাস্টম ফন্ট ও টাইপফেসের
সাথে কাজ করতে আপনি fontFamily অ্যাট্রিবিউট ব্যবহার করতে পারবেন:
এই উদাহরণে দেখানো হয়েছে যে কীভাবে আপনি সেইসব ফন্ট
ফাইল এবং Font ফাংশন ব্যবহার করে fontFamily নির্ধারণ করবেন:
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) )
আপনি এই fontFamily আপনার Text কম্পোজ করার উপযুক্ত আইটেমে পাস করতে পারবেন। কারণ, a
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) }
আপনার পুরো অ্যাপে কীভাবে টাইপোগ্রাফি সেট করতে হয় তা জানতে, Compose-এ কাস্টম ডিজাইন সিস্টেম দেখুন।
ডাউনলোড করা যায় এমন ফন্ট
Compose 1.2.0 থেকে শুরু করে, আপনার Compose অ্যাপে ডাউনলোড করা যায় এমন ফন্ট API ব্যবহার করে Google ফন্ট অ্যাসিঙ্ক্রোনাস পদ্ধতিতে ডাউনলোড করতে এবং আপনার অ্যাপে ব্যবহার করতে পারবেন।
কাস্টম প্রদানকারীর দেওয়া ডাউনলোডযোগ্য ফন্ট বর্তমানে কাজ করে না।
প্রোগ্রামাটিক উপায়ে ডাউনলোড করা যায় এমন ফন্ট ব্যবহার করা
আপনার অ্যাপের মধ্যে থেকে প্রোগ্রাম্যাটিক উপায়ে ফন্ট ডাউনলোড করতে, এইসব ধাপ অনুসরণ করুন:
- ডিপেন্ডেন্সি যোগ করুন:
গ্ৰুভি
dependencies { ... implementation "androidx.compose.ui:ui-text-google-fonts:1.12.1" }
Kotlin
dependencies { ... implementation("androidx.compose.ui:ui-text-google-fonts:1.12.1") }
- 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 )
- Google Fonts-এর জন্য ফন্ট প্রদানকারী কর্তৃপক্ষ।
- প্রদানকারীর পরিচয় যাচাই করার জন্য ফন্ট প্রদানকারীর প্যাকেজ।
- প্রদানকারীর পরিচয় যাচাই করার জন্য সার্টিফিকেটের হ্যাশের সেটগুলির একটি তালিকা।
Google Fonts প্রদানকারীর জন্য প্রয়োজনীয় হ্যাশ আপনি
Jetchat স্যাম্পেল অ্যাপের মধ্যে
font_certs.xmlফাইলে খুঁজে পাবেন।
- ক
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) )
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 ) )
- আপনার টেক্সট কম্পোজ করার উপযুক্ত ফাংশনে
ব্যবহার করার জন্য
FontFamilyকনফিগার করুন:
Text( fontFamily = fontFamily, text = "Hello World!" )
এছাড়াও, আপনি
টাইপোগ্রাফি নির্ধারণ করতে পারেন
আপনার 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/*...*/ ), /*...*/ )
এরপরে, আপনার অ্যাপের থিম অনুযায়ী টাইপোগ্রাফি সেট করুন:
MyAppTheme( typography = MyTypography )/*...*/
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) )
আপনি এই ধরনের দুটি ওয়েটের জন্য আপনার ফন্টের ডিফল্ট নির্ধারণ করতে পারবেন:
// ... 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) )
আপনি সঠিক ইমপোর্ট যোগ করছেন কিনা তা নিশ্চিত করুন।
FontFamily-কে এইভাবে ডিফাইন করলে, FontFamily তৈরি হয় যার মধ্যে দুটি চেইন থাকে,
প্রতিটি ওয়েটের জন্য একটি করে। লোডিং মেকানিজম প্রথমে অনলাইন ফন্ট সমাধান করার চেষ্টা করবে,
এবং তারপরে আপনার স্থানীয় R.font রিসোর্স ফোল্ডারে থাকা ফন্ট।
আপনার প্রয়োগ করা কোড ডিবাগ করা
ফন্ট সঠিকভাবে ডাউনলোড করা হচ্ছে কিনা তা যাচাই করতে সাহায্য করার জন্য, আপনি একটি ডিবাগ করুটিন হ্যান্ডলার নির্ধারণ করতে পারেন। ফন্ট অ্যাসিঙ্ক্রোনাস লোড না হলে কী করতে হবে তা আপনার হ্যান্ডেল থেকে জানা যায়।
একটি
CoroutineExceptionHandler তৈরি করার মাধ্যমে শুরু করুন:
val handler = CoroutineExceptionHandler { _, throwable -> // process the Throwable Log.e(TAG, "There has been an issue: ", throwable) }
নতুন হ্যান্ডলার ব্যবহার করার জন্য রেজালভারকে
createFontFamilyResolver
মেথডে পাস করুন:
CompositionLocalProvider( LocalFontFamilyResolver provides createFontFamilyResolver(LocalContext.current, handler) ) { Column { Text( text = "Hello World!", style = MaterialTheme.typography.bodyMedium ) } }
এছাড়াও, পরিষেবা প্রদানকারী উপলভ্য আছে কিনা এবং সার্টিফিকেট সঠিকভাবে
কনফিগার করা আছে কিনা তা পরীক্ষা করে দেখতে, আপনি পরিষেবা প্রদানকারীর
isAvailableOnDevice
API ব্যবহার করতে পারেন। এটি করতে, আপনি isAvailableOnDevice মেথড
কল করতে পারেন যা প্রদানকারী ভুলভাবে কনফিগার করা থাকলে false রিটার্ন করে।
val context = LocalContext.current LaunchedEffect(Unit) { if (provider.isAvailableOnDevice(context)) { Log.d(TAG, "Success!") } }
Caveats
Android-এ নতুন ফন্ট উপলভ্য করতে Google Fonts-এর কয়েক মাস সময় লাগে।
fonts.google.com-এ কোনও ফন্ট যোগ করা এবং
ডাউনলোড করা যায় এমন ফন্ট API (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), ) ) )
FontVariationAPI আপনাকে ওজন, প্রস্থ ও ঢাল-এর মতো স্ট্যান্ডার্ড ফন্ট অ্যাক্সিস কনফিগার করতে দেয়। এগুলি হল স্ট্যান্ডার্ড অ্যাক্সিস যা যেকোনও ভেরিয়েবল ফন্টের সাথে উপলভ্য। ফন্ট কোথায় ব্যবহার করা হবে তার উপর ভিত্তি করে আপনি ফন্টের বিভিন্ন কনফিগারেশন তৈরি করতে পারবেন।ভেরিয়েবল ফন্ট শুধুমাত্র 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 }
সহজে আবার ব্যবহার করার জন্য সেটিংসকে কনস্ট্যান্টের একটি সেটে এক্সট্র্যাক্ট করুন এবং এই কনস্ট্যান্ট দিয়ে ফন্ট সেটিংস পরিবর্তন করুন:
// 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 }
FontFamilyব্যবহার করতে Material Design 3 টাইপোগ্রাফি কনফিগার করুন:// Type.kt val Typography = Typography( displayLarge = TextStyle( fontFamily = displayLargeFontFamily, fontSize = 50.sp, lineHeight = 64.sp, letterSpacing = 0.sp, /***/ ) )
এই স্যাম্পেলে
displayLargeMaterial 3 টাইপোগ্রাফি ব্যবহার করা হয়েছে, যার আলাদা ডিফল্ট ফন্ট সেটিংস ও সাজেস্ট করা ব্যবহার রয়েছে। যেমন, ছোট, গুরুত্বপূর্ণ টেক্সটের জন্য আপনাকেdisplayLargeব্যবহার করতে হবে, কারণ এটি স্ক্রিনের সবচেয়ে বড় টেক্সট।Material 3-এর সাহায্যে, আপনার টাইপোগ্রাফি কাস্টমাইজ করতে, আপনি
TextStyleএবংfontFamily-এর ডিফল্ট ভ্যালু পরিবর্তন করতে পারবেন। উপরের স্নিপেটে, আপনি প্রতিটি ফন্ট ফ্যামিলির জন্য ফন্ট সেটিংস কাস্টমাইজ করতেTextStyle-এর ইনস্ট্যান্স কনফিগার করেন।আপনি যেহেতু টাইপোগ্রাফি নির্ধারণ করেছেন, তাই এটি M3
MaterialTheme-এ পাস করুন:MaterialTheme( colorScheme = MaterialTheme.colorScheme, typography = Typography, content = content )
সবশেষে, একটি
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 ) } } } }
প্রতিটি
Textকম্পোজ করার উপযুক্ত আইটেমকে এর Material থিমের স্টাইলের মাধ্যমে কনফিগার করা হয় এবং এতে আলাদা আলাদা ভেরিয়েবল ফন্ট কনফিগারেশন থাকে। M3MaterialThemeকম্পোজ করার উপযুক্ত আইটেমকে দেওয়া টাইপোগ্রাফি রিট্রিভ করতে আপনি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()) }
এইসব ফাংশন নিম্নলিখিত কাজগুলি করে:
- সেগুলি গ্রহণ করতে পারে এমন ভ্যালুর জন্য গার্ডরেল নির্ধারণ করুন। আপনি
ভেরিয়েবেল ফন্ট ক্যাটালগে দেখতে পাচ্ছেন যে,
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 }
লক্ষ্য করুন যে ছোট হাতের অক্ষরের অ্যাসেন্ডারের উচ্চতা এখন বেড়ে গেছে এবং অন্যান্য টেক্সট আরও চওড়া হয়ে গেছে:
অতিরিক্ত রিসোর্স
আরও তথ্যের জন্য, ভেরিয়েবল ফন্ট সম্পর্কে নিম্নলিখিত ব্লগ পোস্ট দেখুন:
আপনার জন্য সাজেস্ট করা হয়েছে
- মনে রাখবেন: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট দেখানো হয়
- Compose-এ রিসোর্স
- টেক্সট স্টাইল করা
- Compose-এ Material Design 2