Trang này mô tả cách đặt phông chữ trong ứng dụng Compose.
Đặt phông chữ
Text
có một thông số fontFamily
để cho phép cài đặt phông chữ được dùng trong
thành phần kết hợp. Theo mặc định, bộ phông chữ serif, sans-serif, phông chữ đơn cách và chữ viết tay
được bao gồm:
@Composable fun DifferentFonts() { Column { Text("Hello World", fontFamily = FontFamily.Serif) Text("Hello World", fontFamily = FontFamily.SansSerif) } }
Bạn có thể dùng thuộc tính fontFamily
để làm việc với các phông chữ và kiểu chữ tuỳ chỉnh được xác định trong thư mục res/font
:
Ví dụ này cho thấy cách bạn xác định fontFamily
dựa trên các tệp phông chữ đó và sử dụng hàm 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) )
Bạn có thể truyền fontFamily
này đến thành phần kết hợp Text
. Vì fontFamily
có thể bao gồm nhiều trọng số nên bạn có thể đặt fontWeight
theo cách thủ công để chọn độ đậm phù hợp cho văn bản của mình:
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) }
Để tìm hiểu cách thiết lập kiểu chữ trong toàn bộ ứng dụng, hãy xem bài viết Hệ thống thiết kế tuỳ chỉnh trong Compose.
Phông chữ có thể tải xuống
Kể từ Compose 1.2.0, bạn có thể dùng API phông chữ có thể tải xuống trong ứng dụng Compose để tải phông chữ của Google xuống theo cách không đồng bộ và sử dụng trong ứng dụng.
Hiện tại, chúng tôi chưa hỗ trợ phông chữ có thể tải xuống do nhà cung cấp tuỳ chỉnh cung cấp.
Sử dụng phông chữ có thể tải xuống theo phương thức lập trình
Để tải phông chữ có lập trình xuống từ bên trong ứng dụng của bạn, hãy làm theo các bước sau:
- Thêm phần phụ thuộc:
Groovy
dependencies { ... implementation "androidx.compose.ui:ui-text-google-fonts:1.6.1" }
Kotlin
dependencies { ... implementation("androidx.compose.ui:ui-text-google-fonts:1.6.1") }
- Khởi động
GoogleFont.Provider
bằng thông tin xác thực của Google Fonts:val provider = GoogleFont.Provider( providerAuthority = "com.google.android.gms.fonts", providerPackage = "com.google.android.gms", certificates = R.array.com_google_android_gms_fonts_certs )
Các tham số mà trình cung cấp nhận được là:- Nhà cung cấp phông chữ cho Google Fonts.
- Gói trình cung cấp phông chữ để xác minh danh tính của trình cung cấp
- Danh sách tập hợp hàm băm cho các chứng chỉ để xác minh danh tính của trình cung cấp. Bạn có thể tìm thấy hàm băm cần thiết cho nhà cung cấp Google Fonts ở tệp
font_certs.xml
trong ứng dụng mẫu Jetchat.
- Xác định
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) )
Bạn có thể truy vấn các tham số khác cho phông chữ như độ đậm và kiểu bằngFontWeight
vàFontStyle
lần lượt:// ... 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 ) )
- Định cấu hình
FontFamily
sẽ được sử dụng trong hàm có khả năng kết hợp Văn bản:
Text( fontFamily = fontFamily, text = "Hello World!" )
Bạn cũng có thể xác định Kiểu chữ để sử dụng FontFamily
:
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/*...*/ ), /*...*/ )
Tiếp theo, hãy đặt Kiểu chữ thành chủ đề của ứng dụng:
MyAppTheme( typography = MyTypography )/*...*/
Để xem ví dụ về một ứng dụng đang triển khai phông chữ có thể tải xuống trong Compose cùng với Material3, hãy xem ứng dụng mẫu Jetchat.
Thêm phông chữ dự phòng
Bạn có thể xác định một chuỗi dự phòng cho phông chữ trong trường hợp phông chữ không được tải xuống đúng cách. Chẳng hạn, nếu bạn có phông chữ có thể tải xuống được xác định như sau:
// ... 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) )
Bạn có thể xác định giá trị mặc định cho phông chữ với cả hai trọng số như sau:
// ... 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) )
Hãy nhớ thêm chính xác dữ liệu nhập.
Việc xác định FontFamily
như thế này sẽ tạo ra một FontFamily
chứa hai chuỗi, mỗi trọng số một chuỗi. Cơ chế tải sẽ cố gắng phân giải phông chữ trực tuyến trước, sau đó mới là phông chữ nằm trong thư mục tài nguyên R.font
cục bộ của bạn.
Gỡ lỗi triển khai
Để xác minh liệu phông chữ có được tải xuống chính xác hay không, bạn cần xác định một trình xử lý coroutine gỡ lỗi. Trình xử lý của bạn cung cấp hành vi của việc cần làm trong trường hợp phông chữ không tải không đồng bộ được.
Hãy bắt đầu bằng cách tạo một CoroutineExceptionHandler
:
val handler = CoroutineExceptionHandler { _, throwable -> // process the Throwable Log.e(TAG, "There has been an issue: ", throwable) }
Truyền nó vào phương thức createFontFamilyResolver
để yêu cầu trình phân giải sử dụng trình xử lý mới:
CompositionLocalProvider( LocalFontFamilyResolver provides createFontFamilyResolver(LocalContext.current, handler) ) { Column { Text( text = "Hello World!", style = MaterialTheme.typography.bodyMedium ) } }
Bạn cũng có thể sử dụng API isAvailableOnDevice
của nhà cung cấp để kiểm tra xem họ có sẵn không và các chứng chỉ có được định cấu hình chính xác hay không. Để thực hiện việc này, bạn có thể gọi phương thức isAvailableOnDevice
trả về giá trị false nếu nhà cung cấp được định cấu hình không chính xác.
val context = LocalContext.current LaunchedEffect(Unit) { if (provider.isAvailableOnDevice(context)) { Log.d(TAG, "Success!") } }
Chú ý
Google Fonts mất vài tháng để cung cấp phông chữ mới trên Android.
Có khoảng thời gian giữa thời điểm một phông chữ được thêm vào fonts.google.com cho đến khi phông chữ đó có sẵn thông qua API phông chữ có thể tải xuống (trong hệ thống Khung hiển thị hoặc trong Compose). Các phông chữ mới thêm có thể không tải được trong ứng dụng của bạn khi dùng IllegalStateException
.
Để giúp nhà phát triển xác định lỗi này so với các loại lỗi tải phông chữ khác, chúng tôi đã thêm thông báo mô tả cho trường hợp ngoại lệ này trong Compose kèm theo các thay đổi tại đây.
Nếu bạn phát hiện lỗi, hãy báo cáo bằng công cụ theo dõi lỗi.
Dùng nhiều phông chữ
Phông chữ thay đổi là một định dạng phông chữ cho phép một tệp phông chữ chứa nhiều kiểu. Với nhiều phông chữ, bạn có thể sửa đổi trục (hoặc tham số) để tạo kiểu mà mình muốn. Các trục này có thể là chuẩn, chẳng hạn như trọng số, chiều rộng, độ nghiêng và in nghiêng hoặc tuỳ chỉnh, khác nhau giữa các phông chữ khác nhau.
Việc sử dụng nhiều phông chữ thay vì các tệp phông chữ thông thường cho phép bạn chỉ có một tệp phông chữ thay vì nhiều tệp phông chữ.
Để biết thêm thông tin về phông chữ biến, hãy xem Kiến thức về phông chữ của Google, toàn bộ danh mục của các phông chữ biến có sẵn và bảng các trục được hỗ trợ cho từng phông chữ.
Tài liệu này cho bạn biết cách triển khai phông chữ có thể thay đổi trong ứng dụng Compose.
Tải phông chữ biến
Tải phông chữ biến thể mà bạn muốn sử dụng (ví dụ: Roboto Flex) xuống rồi đặt phông chữ đó vào thư mục
app/res/font
trong ứng dụng của bạn. Hãy đảm bảo rằng tệp .Tệpttf
bạn thêm là phiên bản phông chữ biến của phông chữ và tên của tệp phông chữ đều là chữ thường và không chứa bất kỳ ký tự đặc biệt nào.Để tải phông chữ biến, hãy xác định
FontFamily
bằng cách sử dụng phông chữ đặt trong thư mụcres/font/
:// 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), ) ) )
API
FontVariation
cho phép bạn định cấu hình các trục phông chữ chuẩn, chẳng hạn như trọng số, chiều rộng và độ nghiêng. Đây là các trục chuẩn có sẵn với mọi phông chữ có thể thay đổi. Bạn có thể tạo các cấu hình khác nhau của phông chữ dựa trên vị trí sẽ sử dụng phông chữ đó.Phông chữ biến đổi chỉ dành cho phiên bản Android O trở lên. Vì vậy, hãy thêm một biện pháp bảo vệ và định cấu hình một phương án dự phòng thích hợp:
// 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 }
Trích xuất các chế độ cài đặt thành một tập hợp các hằng số để dễ dàng sử dụng lại và thay thế các chế độ cài đặt phông chữ bằng các hằng số sau:
// 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 }
Định cấu hình kiểu chữ của Material Design 3 để sử dụng
FontFamily
:// Type.kt val Typography = Typography( displayLarge = TextStyle( fontFamily = displayLargeFontFamily, fontSize = 50.sp, lineHeight = 64.sp, letterSpacing = 0.sp, /***/ ) )
Mẫu này sử dụng
displayLarge
kiểu chữ Material 3, có các chế độ cài đặt phông chữ mặc định và cách sử dụng được đề xuất khác. Ví dụ: bạn nên sử dụngdisplayLarge
cho văn bản ngắn và quan trọng, vì đây là văn bản lớn nhất trên màn hình.Với Material 3, bạn có thể thay đổi các giá trị mặc định của
TextStyle
vàfontFamily
để tuỳ chỉnh kiểu chữ. Trong đoạn mã trên, bạn có thể định cấu hình các phiên bản củaTextStyle
để tuỳ chỉnh các chế độ cài đặt phông chữ cho từng bộ phông chữ.Bây giờ, bạn đã xác định được kiểu chữ, hãy truyền kiểu chữ đó vào
MaterialTheme
của M3:MaterialTheme( colorScheme = MaterialTheme.colorScheme, typography = Typography, content = content )
Cuối cùng, hãy sử dụng thành phần kết hợp
Text
và chỉ định kiểu cho một trong các kiểu chữ đã xác định,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 ) } } } }
Mỗi thành phần kết hợp
Text
được định cấu hình thông qua kiểu của giao diện Material và chứa các cấu hình phông chữ thay đổi khác nhau. Bạn có thể sử dụngMaterialTheme.typography
để truy xuất kiểu chữ được cung cấp cho thành phần kết hợpMaterialTheme
của M3.
Sử dụng trục tuỳ chỉnh
Phông chữ cũng có thể có trục tuỳ chỉnh. Những kích thước này được xác định trong chính tệp phông chữ.
Ví dụ: phông chữ Roboto Flex có trục chiều cao dấu gạch đứng ("YTAS"
) giúp điều chỉnh chiều cao của chữ cái viết thường, trong khi chiều rộng bộ đếm ("XTRA"
) điều chỉnh chiều rộng của từng chữ cái.
Bạn có thể thay đổi giá trị của các trục này qua chế độ cài đặt FontVariation
.
Để biết thêm thông tin về các trục tuỳ chỉnh mà bạn có thể định cấu hình cho một phông chữ, hãy xem bảng các trục được hỗ trợ cho từng phông chữ.
Để sử dụng trục tuỳ chỉnh, hãy xác định các hàm cho trục
ascenderHeight
vàcounterWidth
tuỳ chỉnh: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()) }
Các hàm này có những chức năng sau:
- Xác định các biện pháp bảo vệ cho các giá trị mà chúng có thể chấp nhận. Như bạn có thể thấy trong Danh mục phông chữ biến,
ascenderHeight (YTAS)
có giá trị tối thiểu là649f
và tối đa là854f
. - Trả về chế độ cài đặt phông chữ để cấu hình sẵn sàng để thêm vào phông chữ. Trong phương thức
FontVariation.Setting()
, tên trục (YTAS, XTRA
) được mã hoá cứng và nhận giá trị làm tham số.
- Xác định các biện pháp bảo vệ cho các giá trị mà chúng có thể chấp nhận. Như bạn có thể thấy trong Danh mục phông chữ biến,
Sử dụng các trục có cấu hình phông chữ, truyền tham số bổ sung đến mỗi
Font
được tải:@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 }
Lưu ý rằng chiều cao của dấu gạch đứng chữ thường hiện đã tăng lên và văn bản khác rộng hơn:
Tài nguyên khác
Để biết thêm thông tin, hãy xem bài đăng trên blog sau về phông chữ biến:
Đề xuất cho bạn
- Lưu ý: văn bản có đường liên kết sẽ hiện khi JavaScript tắt
- Tài nguyên trong Compose
- Kiểu văn bản
- Material Design 2 trong Compose