এই পৃষ্ঠাটি বর্ণনা করে কিভাবে আপনার রচনা অ্যাপে ফন্ট সেট করতে হয়।
ফন্ট সেট করুন
কম্পোজেবলে ব্যবহৃত ফন্ট সেট করার অনুমতি দেওয়ার জন্য 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) )
আপনি আপনার Text
কম্পোজেবল এই fontFamily
পাস করতে পারেন. যেহেতু একটি 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) }
আপনার সম্পূর্ণ অ্যাপে টাইপোগ্রাফি কীভাবে সেট করবেন তা শিখতে, রচনায় কাস্টম ডিজাইন সিস্টেম দেখুন।
ডাউনলোডযোগ্য ফন্ট
কম্পোজ 1.2.0 থেকে শুরু করে, আপনি Google ফন্টগুলিকে অ্যাসিঙ্ক্রোনাসভাবে ডাউনলোড করতে এবং আপনার অ্যাপে ব্যবহার করতে আপনার কম্পোজ অ্যাপে ডাউনলোডযোগ্য ফন্ট API ব্যবহার করতে পারেন।
কাস্টম প্রদানকারীদের দ্বারা প্রদত্ত ডাউনলোডযোগ্য ফন্টগুলির জন্য সমর্থন বর্তমানে উপলব্ধ নয়৷
প্রোগ্রাম্যাটিকভাবে ডাউনলোডযোগ্য ফন্ট ব্যবহার করুন
আপনার অ্যাপের মধ্যে থেকে প্রোগ্রাম্যাটিকভাবে একটি ফন্ট ডাউনলোড করতে, এই পদক্ষেপগুলি অনুসরণ করুন:
- নির্ভরতা যোগ করুন:
গ্রোভি
dependencies { ... implementation "androidx.compose.ui:ui-text-google-fonts:1.7.5" }
কোটলিন
dependencies { ... implementation("androidx.compose.ui:ui-text-google-fonts:1.7.5") }
- Google ফন্টের জন্য শংসাপত্র সহ
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 ফন্টের জন্য ফন্ট প্রদানকারী কর্তৃপক্ষ।
- প্রদানকারীর পরিচয় যাচাই করার জন্য ফন্ট প্রদানকারী প্যাকেজ।
- প্রদানকারীর পরিচয় যাচাই করার জন্য সার্টিফিকেটের জন্য হ্যাশের সেটের একটি তালিকা। আপনি Jetchat নমুনা অ্যাপের
font_certs.xml
ফাইলে Google ফন্ট প্রদানকারীর জন্য প্রয়োজনীয় হ্যাশগুলি খুঁজে পেতে পারেন।
- একটি
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 )/*...*/
একটি অ্যাপের উদাহরণের জন্য যা 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
পদ্ধতিতে কল করতে পারেন যা প্রদানকারী ভুলভাবে কনফিগার করা হলে মিথ্যা ফেরত দেয়।
val context = LocalContext.current LaunchedEffect(Unit) { if (provider.isAvailableOnDevice(context)) { Log.d(TAG, "Success!") } }
সতর্কতা
অ্যান্ড্রয়েডে নতুন ফন্ট উপলব্ধ করতে গুগল ফন্টের বেশ কয়েক মাস সময় লাগে। fonts.google.com- এ ফন্ট যোগ করার সময় এবং ডাউনলোডযোগ্য ফন্ট এপিআই (হয় ভিউ সিস্টেমে বা কম্পোজে) এর মাধ্যমে উপলব্ধ হওয়ার মধ্যে সময়ের মধ্যে একটি ব্যবধান রয়েছে। নতুন যোগ করা ফন্ট একটি IllegalStateException
সহ আপনার অ্যাপে লোড হতে ব্যর্থ হতে পারে। অন্যান্য ধরণের ফন্ট লোডিং ত্রুটিগুলির তুলনায় বিকাশকারীদের এই ত্রুটিটি সনাক্ত করতে সহায়তা করার জন্য, আমরা এখানে পরিবর্তনগুলির সাথে রচনায় ব্যতিক্রমের জন্য বর্ণনামূলক বার্তা যোগ করেছি৷ আপনি যদি কোনো সমস্যা খুঁজে পান, তাহলে সমস্যা ট্র্যাকার ব্যবহার করে রিপোর্ট করুন।
পরিবর্তনশীল ফন্ট ব্যবহার করুন
একটি পরিবর্তনশীল ফন্ট হল একটি ফন্ট বিন্যাস যা একটি ফন্ট ফাইলকে বিভিন্ন শৈলী ধারণ করতে দেয়। পরিবর্তনশীল ফন্টের সাহায্যে, আপনি আপনার পছন্দের শৈলী তৈরি করতে অক্ষ (বা পরামিতি) পরিবর্তন করতে পারেন। এই অক্ষগুলি মানক হতে পারে, যেমন ওজন, প্রস্থ, তির্যক, এবং তির্যক, বা কাস্টম, যা পরিবর্তনশীল ফন্ট জুড়ে আলাদা।
নিয়মিত ফন্ট ফাইলের পরিবর্তে পরিবর্তনশীল ফন্ট ব্যবহার করে আপনি একাধিক ফন্টের পরিবর্তে শুধুমাত্র একটি ফন্ট ফাইল রাখতে পারবেন।
পরিবর্তনশীল ফন্ট সম্পর্কে আরও পটভূমির জন্য, Google ফন্ট জ্ঞান , উপলব্ধ পরিবর্তনশীল ফন্টগুলির সম্পূর্ণ ক্যাটালগ এবং প্রতিটি ফন্টের জন্য সমর্থিত অক্ষগুলির একটি টেবিল দেখুন।
এই ডকটি আপনাকে দেখায় কিভাবে আপনার রচনা অ্যাপে একটি পরিবর্তনশীল ফন্ট প্রয়োগ করতে হয়।
একটি পরিবর্তনশীল ফন্ট লোড করুন
আপনি যে পরিবর্তনশীল ফন্টটি ব্যবহার করতে চান তা ডাউনলোড করুন (উদাহরণস্বরূপ রোবোটো ফ্লেক্স ) এবং এটিকে আপনার অ্যাপের
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), ) ) )
FontVariation
API আপনাকে স্ট্যান্ডার্ড ফন্ট অক্ষ যেমন ওজন , প্রস্থ এবং তির্যক কনফিগার করতে দেয়। এগুলি মানক অক্ষ যা যেকোনো পরিবর্তনশীল ফন্টের সাথে উপলব্ধ। ফন্টটি কোথায় ব্যবহার করা হবে তার উপর ভিত্তি করে আপনি ফন্টের বিভিন্ন কনফিগারেশন তৈরি করতে পারেন।পরিবর্তনশীল ফন্টগুলি শুধুমাত্র 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
ব্যবহার করতে মেটেরিয়াল ডিজাইন 3 টাইপোগ্রাফি কনফিগার করুন:// Type.kt val Typography = Typography( displayLarge = TextStyle( fontFamily = displayLargeFontFamily, fontSize = 50.sp, lineHeight = 64.sp, letterSpacing = 0.sp, /***/ ) )
এই নমুনাটি
displayLarge
ম্যাটেরিয়াল 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
কম্পোজেবল তার মেটেরিয়াল থিমের স্টাইলের মাধ্যমে কনফিগার করা হয়েছে এবং এতে একটি ভিন্ন পরিবর্তনশীল ফন্ট কনফিগারেশন রয়েছে। M3MaterialTheme
কম্পোজেবলে প্রদত্ত টাইপোগ্রাফি পুনরুদ্ধার করতে আপনিMaterialTheme.typography
ব্যবহার করতে পারেন।
কাস্টম অক্ষ ব্যবহার করুন
ফন্টে কাস্টম অক্ষও থাকতে পারে। এগুলি ফন্ট ফাইলের মধ্যেই সংজ্ঞায়িত করা হয়। উদাহরণস্বরূপ, রোবোটো ফ্লেক্স ফন্টে অ্যাসেন্ডার উচ্চতা ( "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()) }
এই ফাংশনগুলি নিম্নলিখিতগুলি করে:
- তারা যে মানগুলি গ্রহণ করতে পারে তার জন্য guardrails সংজ্ঞায়িত করুন। আপনি পরিবর্তনশীল ফন্ট ক্যাটালগে দেখতে পাচ্ছেন,
ascenderHeight (YTAS)
এর সর্বনিম্ন মান649f
এবং সর্বোচ্চ854f
। - ফন্ট সেটিং ফেরত দিন, তাই কনফিগারেশন ফন্টে যোগ করার জন্য প্রস্তুত।
FontVariation.Setting()
পদ্ধতিতে, অক্ষের নাম (YTAS, XTRA
) হার্ডকোড করা হয় এবং এটি মানটিকে একটি প্যারামিটার হিসেবে নেয়।
- তারা যে মানগুলি গ্রহণ করতে পারে তার জন্য guardrails সংজ্ঞায়িত করুন। আপনি পরিবর্তনশীল ফন্ট ক্যাটালগে দেখতে পাচ্ছেন,
ফন্ট কনফিগারেশন সহ অক্ষগুলি ব্যবহার করে, লোড করা প্রতিটি
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 }
লক্ষ্য করুন যে ছোট হাতের আরোহীর উচ্চতা এখন বৃদ্ধি পেয়েছে, এবং অন্য পাঠ্যটি আরও চওড়া:
অতিরিক্ত সম্পদ
আরও তথ্যের জন্য, পরিবর্তনশীল ফন্ট সম্পর্কে নিম্নলিখিত ব্লগ পোস্ট দেখুন:
{% শব্দার্থে %}আপনার জন্য প্রস্তাবিত
- দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট প্রদর্শিত হয়
- কম্পোজ সম্পদ
- শৈলী পাঠ্য
- কম্পোজে মেটেরিয়াল ডিজাইন 2