Flutter TextField多文本样式实现：分语言配置不同字体

Web端实现 #

• 基础方案：利用CSS字体 fallback 机制，浏览器会自动为不同字符匹配对应字体

.text-multilang {
  font-family: 'Poppins', 'sfArabic', sans-serif;
}

• 精准匹配方案：通过unicode-range指定字符范围，避免字体冲突

/* 声明字体文件 */
@font-face {
  font-family: 'Poppins';
  src: url('path/to/Poppins-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'sfArabic';
  src: url('path/to/sfArabic-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* 英文及拉丁字符用Poppins */
.text-multilang {
  font-family: 'Poppins', sans-serif;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 阿拉伯文用sfArabic */
.text-multilang:lang(ar) {
  font-family: 'sfArabic', sans-serif;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

iOS端实现 #

• Swift代码实现：通过字体描述符组合字体，系统自动匹配字符

// 初始化两种字体
let poppinsFont = UIFont(name: "Poppins-Regular", size: 17)!
let sfArabicFont = UIFont(name: "sfArabic-Regular", size: 17)!

// 组合字体描述符
let fontDescriptors = [poppinsFont.fontDescriptor, sfArabicFont.fontDescriptor]
let combinedDescriptor = UIFontDescriptor.createMatchingFontDescriptors(fromFontDescriptors: fontDescriptors).first!
let combinedFont = UIFont(descriptor: combinedDescriptor, size: 17)

// 应用到文本控件
yourLabel.font = combinedFont

• SwiftUI简化实现

Text("Hello مرحبا")
  .font(.custom("Poppins", size: 17))
  .font(.custom("sfArabic", size: 17))

• 注意：需将两种字体添加到项目Info.plist的Fonts provided by application列表中

Android端实现 #

• 定义多语言字体族（res/font/multilang_font.xml）

<font-family xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 英文用Poppins -->
    <font
        android:fontStyle="normal"
        android:fontWeight="400"
        android:font="@font/poppins_regular" />
    <!-- 阿拉伯文用sfArabic，指定字符范围 -->
    <font
        android:fontStyle="normal"
        android:fontWeight="400"
        android:font="@font/sfarabic_regular"
        android:unicodeRange="U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF" />
</font-family>

• 布局文件中引用

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello مرحبا"
    android:fontFamily="@font/multilang_font" />

内容的提问来源于stack exchange，提问作者Ravin Laheri