Nhiều kiểu chữ trong một văn bản

Figma cho phép nhà thiết kế áp dụng nhiều kiểu biến thể văn bản trong một thành phần văn bản. Ví dụ, từ "Brown" (Nâu) trong thành phần Figma được gói sau đây là một thành phần văn bản chứa những kiểu chữ đa dạng, bao gồm nhiều cỡ chữ khác nhau trong một từ.

Kiểu văn bản kết hợp trong một phần tử văn bản đơn lẻ

Relay hỗ trợ dịch thiết kế thành mã cho nhiều kiểu văn bản và các bản dịch này được áp dụng cho chuỗi con trong lớp văn bản Figma. Trong mã nguồn được tạo, AnnotatedString và SpanStyle của Compose được dùng để thể hiện nhiều kiểu trong lớp văn bản.

Các kiểu chữ được hỗ trợ bao gồm:

  • phông chữ
  • cỡ chữ
  • độ đậm phông chữ
  • màu
  • giãn cách chữ
  • in nghiêng
  • gạch ngang chữ
  • gạch chân

Trong mã Compose đã tạo, thành phần kết hợp RelayText của Relay có thể chấp nhận String hoặc AnnotatedString. Relay tạo mã Kotlin sử dụng các lớp AnnotatedString.Builder và SpanStyle để kết xuất nhiều kiểu chữ trong văn bản. Đoạn mã dưới đây cho thấy khoảng cách chữ cái rộng áp dụng cho từ "jumps", theo sau là dấu cách không có kiểu tuỳ chỉnh và tiếp đó là từ "over" được in đậm nghiêng.

RelayText(
   content = buildAnnotatedString {
       append("The ")
       ...
       withStyle(
           style = SpanStyle(
               letterSpacing = 8.64.sp,
           )
       ) { // AnnotatedString.Builder
           append("jumps")
       }
       append(" ")
       withStyle(
           style = SpanStyle(
               fontFamily = inter,
               fontSize = 32.0.sp,
               fontWeight = FontWeight(700.0.toInt()),
               fontStyle = FontStyle.Italic,
           )
       ) { // AnnotatedString.Builder
           append("over")
       }
       ...
   },
   ...
)

Các điểm hạn chế