SOUI 字体样式系统指南¶

Warning

The current page still doesn't have a translation for this language.

You can read it through google translate.

字体样式定义是SOUI样式系统的重要组成部分，用于统一管理文本的外观样式。通过字体样式定义，可以集中控制字体名称、大小、粗细、装饰效果等属性。

字体样式概述¶

字体样式定义具有以下核心特性： - 样式复用：定义一次，多处使用 - 统一管理：集中控制所有文本样式 - 灵活调整：支持相对尺寸和绝对尺寸 - 丰富效果：支持粗体、斜体、下划线、删除线等 - 主题适配：配合主题系统实现样式切换

字体样式语法详解¶

基本语法格式¶

字体样式使用键值对格式定义，属性之间用分号分隔：

face:字体名称;size:数值;weight:数值;属性:值

字体样式属性表¶

属性名	作用	取值范围	默认值	说明
`face`	字体名称	系统字体名	系统默认	支持中英文名称，如"微软雅黑"、"Arial"
`size`	字体大小	正整数	12	单位为像素(px)
`weight`	字体粗细	0-1000	400	400=正常，700=粗体，数值越大越粗
`bold`	粗体开关	0或1	0	已废弃，建议使用weight
`italic`	斜体	0或1	0	1=启用斜体
`underline`	下划线	0或1	0	1=启用下划线
`strike`	删除线	0或1	0	1=启用删除线
`adding`	相对调整	整数	0	基于基础尺寸的相对调整，如+2、-1
`charset`	字符集	0-255	134	134=GB2312(简体中文)，0=ANSI
`escapement`	文本旋转	-3600-3600	0	旋转角度(十分之一度)，如900=90度

字体粗细对照表¶

数值	中文描述	英文描述	典型用途
100	极细	Thin	极细标题
200	特细	ExtraLight	辅助文本
300	细体	Light	说明文字
400	正常	Normal	正文内容
500	中等	Medium	强调文本
600	半粗	SemiBold	小标题
700	粗体	Bold	重要文本
800	特粗	ExtraBold	主标题
900	极粗	Black	特大标题

创建字体样式文件¶

基础字体样式定义¶

在values目录下创建字体样式文件，推荐命名为fonts.xml：

<?xml version="1.0" encoding="utf-8"?>
<font>
    <!-- 基础文本样式 -->
    <text_normal value="face:微软雅黑;size:14;weight:400"/>
    <text_small value="face:微软雅黑;size:12;weight:400"/>
    <text_large value="face:微软雅黑;size:16;weight:400"/>

    <!-- 标题样式 -->
    <title_h1 value="face:微软雅黑;size:24;weight:700"/>
    <title_h2 value="face:微软雅黑;size:20;weight:600"/>
    <title_h3 value="face:微软雅黑;size:18;weight:600"/>

    <!-- 强调样式 -->
    <text_bold value="face:微软雅黑;size:14;weight:700"/>
    <text_italic value="face:微软雅黑;size:14;weight:400;italic:1"/>
    <text_underline value="face:微软雅黑;size:14;weight:400;underline:1"/>

    <!-- 按钮样式 -->
    <button_text value="face:微软雅黑;size:14;weight:500"/>
    <button_small value="face:微软雅黑;size:12;weight:500"/>

    <!-- 输入框样式 -->
    <input_text value="face:Consolas;size:13;weight:400"/>

    <!-- 代码样式 -->
    <code_style value="face:Consolas;size:13;weight:400"/>
    <code_comment value="face:Consolas;size:13;weight:400;italic:1"/>
</font>

命名规范建议¶

命名模式	示例	用途说明
`text_` + 尺寸	`text_small`, `text_normal`, `text_large`	基础文本样式
`title_` + 级别	`title_h1`, `title_h2`, `title_h3`	标题层级样式
`button_` + 尺寸	`button_text`, `button_small`	按钮文本样式
`input_` + 类型	`input_text`, `input_label`	输入控件样式
`code_` + 用途	`code_style`, `code_comment`	代码显示样式
修饰前缀	`text_bold`, `text_italic`, `text_underline`	装饰效果样式

字体样式配置¶

添加到资源索引¶

在uires.idx中注册字体样式文件：

<resources>
    <values>
        <file name="fonts" path="values\fonts.xml"/>
    </values>
</resources>

在应用配置中引用¶

在init.xml中添加字体样式引用：

<UIDEF>
    <resources>
        <font src="values:fonts"/>
    </resources>
</UIDEF>

使用字体样式¶

在布局文件中使用¶

通过@font/语法引用定义的字体样式：

<!-- 标题文本 -->
<text name="main_title" text="欢迎使用SOUI" font="@font/title_h1" color="#333333"/>

<!-- 正文内容 -->
<text name="content" text="这是正文内容" font="@font/text_normal" color="#666666"/>

<!-- 重要提示 -->
<text name="warning" text="重要提示" font="@font/text_bold" color="#ff4444"/>

<!-- 按钮文本 -->
<button name="btn_submit" text="提交" font="@font/button_text" width="80" height="32"/>

<!-- 输入框 -->
<edit name="username" hint="请输入用户名" font="@font/input_text" width="200" height="30"/>

<!-- 代码显示 -->
<text name="code_example" text="console.log('Hello World');" 
      font="@font/code_style" color="#d73a49" background="#f6f8fa"/>

在控件样式中应用¶

<!-- 定义控件样式 -->
<style name="page_title">
    <text font="@font/title_h1" color="#333333" gravity="center"/>
</style>

<style name="section_title">
    <text font="@font/title_h2" color="#555555" marginBottom="10"/>
</style>

<style name="primary_button">
    <button font="@font/button_text" colorText="#ffffff" colorBkgnd="#007bff"/>
</style>

<style name="form_input">
    <edit font="@font/input_text" colorText="#333333" colorBkgnd="#ffffff"/>
</style>

在代码中动态使用¶

// 获取字体样式描述
SStringT strFontDesc = SFontPool::getSingleton().GetFontDesc(L"@font/text_normal");

// 应用字体样式到控件
pText->SetAttribute(L"font", L"@font/text_bold");

// 创建临时字体样式
IFontPtr pTempFont = SFontPool::getSingleton().GetFont(L"face:Arial;size:16;weight:700");

高级字体样式技巧¶

相对尺寸调整¶

使用adding属性实现相对尺寸调整：

<!-- 基础样式 -->
<text_base value="face:微软雅黑;size:14;weight:400"/>

<!-- 相对调整 -->
<text_large value="face:微软雅黑;size:14;weight:400;adding:+2"/>
<text_small value="face:微软雅黑;size:14;weight:400;adding:-2"/>

装饰效果组合¶

可以同时启用多种装饰效果：

<!-- 粗体+斜体 -->
<text_bold_italic value="face:微软雅黑;size:14;weight:700;italic:1"/>

<!-- 下划线+删除线 -->
<text_line_through value="face:微软雅黑;size:14;weight:400;underline:1;strike:1"/>

主题字体样式¶

为不同主题定义字体样式：

<!-- 浅色主题字体 -->
<font theme="light">
    <text_normal value="face:微软雅黑;size:14;weight:400"/>
    <title_h1 value="face:微软雅黑;size:24;weight:700"/>
</font>

<!-- 深色主题字体 -->
<font theme="dark">
    <text_normal value="face:微软雅黑;size:14;weight:400"/>
    <title_h1 value="face:微软雅黑;size:24;weight:600"/>
</font>

字体样式最佳实践¶

设计原则¶

层次清晰：通过字体大小和粗细建立信息层次
风格统一：保持字体风格的一致性
可读性优先：选择易读的字体和合适的字号
适配性强：考虑不同分辨率的显示效果

字体层级体系¶

层级	样式名称	字体大小	字体粗细	典型用途
一级标题	`title_h1`	24px	700	页面主标题
二级标题	`title_h2`	20px	600	章节标题
三级标题	`title_h3`	18px	600	小节标题
正文	`text_normal`	14px	400	主要内容
辅助文本	`text_small`	12px	400	说明文字
标签文本	`text_tiny`	11px	400	小标签

文件组织建议¶

values/
├── fonts.xml              # 基础字体样式
├── fonts_large.xml        # 大字体模式
├── fonts_compact.xml      # 紧凑模式
└── fonts/
    ├── typography.xml     # 排版样式
    ├── components.xml     # 组件样式
    └── themes/
        ├── light.xml      # 浅色主题样式
        └── dark.xml       # 深色主题样式

维护建议¶

命名规范：使用语义化的命名方式
版本控制：记录字体样式的变更历史
测试验证：在不同设备上测试显示效果
文档注释：为复杂样式添加使用说明

常见问题解答¶

Q: 字体样式支持哪些系统字体？ A: 支持Windows系统安装的所有字体，包括中文字体（微软雅黑、宋体、黑体等）和英文字体（Arial、Times New Roman等）。

Q: 如何查看系统可用字体？ A: 在Windows系统中，可以通过控制面板的"字体"查看所有已安装字体。

Q: 字体样式可以继承吗？ A: 字体样式定义是独立的，不支持继承，但可以通过定义基础样式和修饰样式实现类似效果。

Q: 字体大小支持小数吗？ A: 字体大小必须是整数像素值，不支持小数。

Q: 如何调试字体样式问题？ A: 可以临时在控件上设置font属性为具体值进行测试，确认效果后再更新到样式文件中。