Text是 QML 里最基础的文本组件，不需要依赖 Controls，轻量且灵活。日常 UI 开发中，调整字体、样式和对齐是最常见的需求。这篇把Text在字体样式方面的核心属性一次说清，并给出实际使用时的选型建议。

Text 字体样式总览

Text的字体相关属性主要分三类：

• 基础样式：颜色、粗体、斜体、下划线、删除线
• 字体属性：字体系列、字号、字重、字母/单词间距
• 艺术样式：Text.Normal、Text.Outline、Text.Raised、Text.Sunken

搞清楚这三类的分工，就能覆盖大部分文本展示需求。

Text 基础用法

这个 demo 展示了Text最常用的基础样式：纯文本、颜色、粗体、斜体、下划线、删除线。Text不像Label那样自动继承 Controls 主题，所以所有样式都需要手动指定。

演示代码

import QtQuick import QtQuick.Layouts FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 15 // ... 省略标题组件 TitleSeparator ... ColumnLayout { Layout.leftMargin: 20 spacing: 12 Text { text: "普通文本 - Hello World!"; font.pointSize: 12 } Text { text: "带颜色文本"; font.pointSize: 12; color: "#E91E63" } Text { text: "粗体文本"; font.pointSize: 12; font.bold: true } Text { text: "斜体文本"; font.pointSize: 12; font.italic: true } Text { text: "下划线文本"; font.pointSize: 12; font.underline: true } Text { text: "删除线文本"; font.pointSize: 12; font.strikeout: true } } Item { Layout.fillHeight: true } } }

关键逻辑解析

Text的字体修饰都挂在font分组下：

• font.bold：粗体
• font.italic：斜体
• font.underline：下划线
• font.strikeout：删除线

color直接控制文字颜色，和Label一样。

适用场景

这种基础样式适合商品价格划线显示、任务完成状态、文档编辑器里的富文本预览等。比如用font.strikeout: true表示已完成的待办事项，用font.underline: true表示链接或重点内容。

注意点

如果项目里已经用了 Controls 主题，直接用Text显示文字可能会出现字体和Label不一致的情况。这时要么手动指定font.family，要么改用Label。

Text 字体属性

除了基础修饰，还经常需要改字体系列、字号、字重和间距。这个 demo 展示了font.family、font.pointSize、font.weight、font.letterSpacing和font.wordSpacing的用法。

演示代码

import QtQuick import QtQuick.Layouts FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 15 // ... 省略标题组件 TitleSeparator ... ColumnLayout { Layout.leftMargin: 20 spacing: 12 Text { text: "字体系列: Arial"; font.family: "Arial"; font.pointSize: 12 } Text { text: "字体系列: Courier New"; font.family: "Courier New"; font.pointSize: 12 } Text { text: "字体大小: 13pt"; font.pointSize: 13 } Text { text: "字体粗细: Bold (700)"; font.pointSize: 12; font.weight: Font.Bold } Text { text: "字母间距: 5px"; font.pointSize: 12; font.letterSpacing: 5 } Text { text: "单词间距: 10px"; font.pointSize: 12; font.wordSpacing: 10 } } Item { Layout.fillHeight: true } } }

关键逻辑解析

• font.family：字体名，必须填系统里存在的字体
• font.pointSize和font.pixelSize：前者按点，后者按像素，二选一不要同时用
• font.weight：可以用Font.Light、Font.Normal、Font.Bold等枚举
• font.letterSpacing/font.wordSpacing：做标题设计时很有用

适用场景

自定义字体系列适合做代码编辑器、终端模拟器、品牌标题；字重和间距适合做标题层级系统。比如大屏数据看板里，标题用font.weight: Font.Bold加letterSpacing: 2会显得更有设计感。

注意点

font.family一定要填系统里实际安装的字体名。如果字体不存在，QML 会回退到默认字体，不会报错，但效果会不对。跨平台项目要特别注意字体可用性。

Text 文本样式

Text自带几种艺术字样式，适合做简单特效。这个 demo 展示了Text.Normal、Text.Outline、Text.Raised、Text.Sunken四种效果。

演示代码

import QtQuick import QtQuick.Layouts FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 15 // ... 省略标题组件 TitleSeparator ... Row { spacing: 15 Text { font.pointSize: 14; text: "Normal"; style: Text.Normal } Text { font.pointSize: 14; text: "Outline"; style: Text.Outline; styleColor: "red" } Text { font.pointSize: 14; text: "Raised"; style: Text.Raised; styleColor: "#AAAAAA" } Text { font.pointSize: 14; text: "Sunken"; style: Text.Sunken; styleColor: "#AAAAAA" } } // ... 省略说明文本 ... Item { Layout.fillHeight: true } } }

关键逻辑解析

• Text.Normal：默认
• Text.Outline：空心描边，styleColor控制描边色
• Text.Raised：凸起阴影
• Text.Sunken：凹陷阴影

这些样式适合在不需要额外 Canvas/Shader 时快速做出标题效果。

适用场景

Text.Outline适合做水印、标题描边；Text.Raised和Text.Sunken适合做按钮按下状态或复古风格界面。游戏 UI、仪表盘标题经常用这几种效果来增强视觉层次。

注意点

styleColor只在Outline、Raised、Sunken时生效。如果文字本身颜色和styleColor太接近，效果会不明显。建议用对比强烈的颜色组合。

Text 文本对齐

对齐分水平和垂直两个方向，常用于按钮文字、卡片标题等场景。这个 demo 用Repeater把三种水平对齐（左/中/右）和三种垂直对齐（置顶/居中/底部）统一展示，并且给每个示例加了背景框，让对齐效果一目了然。

演示代码

import QtQuick import QtQuick.Layouts FadeInAnimation { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 15 // ... 省略标题组件 TitleSeparator ... ColumnLayout { Layout.leftMargin: 20 spacing: 12 Repeater { model: [ { text: "左对齐 (默认)", hAlign: Text.AlignLeft, vAlign: Text.AlignVCenter, height: 32 }, { text: "居中对齐", hAlign: Text.AlignHCenter, vAlign: Text.AlignVCenter, height: 32 }, { text: "右对齐", hAlign: Text.AlignRight, vAlign: Text.AlignVCenter, height: 32 }, { text: "垂直置顶", hAlign: Text.AlignLeft, vAlign: Text.AlignTop, height: 40 }, { text: "垂直居中", hAlign: Text.AlignLeft, vAlign: Text.AlignVCenter, height: 40 }, { text: "垂直底部", hAlign: Text.AlignLeft, vAlign: Text.AlignBottom, height: 40 }, { text: "水平+垂直居中", hAlign: Text.AlignHCenter, vAlign: Text.AlignVCenter, height: 40 } ] Rectangle { width: 200 height: modelData.height color: "#f5f5f5" border.color: "#ddd" Text { anchors.fill: parent anchors.margins: 4 text: modelData.text horizontalAlignment: modelData.hAlign verticalAlignment: modelData.vAlign font.pointSize: 11 } } } } Item { Layout.fillHeight: true } } }

关键逻辑解析

• Repeater配合model数组，把三个水平对齐示例用同一段模板生成，避免重复代码
• 每个示例用Rectangle做背景框，明确显示Text的边界，对齐效果更直观
• horizontalAlignment：AlignLeft、AlignRight、AlignHCenter
• verticalAlignment：AlignTop、AlignBottom、AlignVCenter
• 垂直对齐需要Text有明确高度，通常配合anchors.fill: parent或固定height

适用场景

按钮文字通常需要水平和垂直双居中；列表项标题根据语言习惯选择左对齐或右对齐；数值展示常用右对齐，方便多行数字的小数点对齐。

注意点

如果Text没有明确宽度或高度，对齐属性可能看不出效果。水平对齐需要设置width，垂直对齐需要设置height。用anchors.fill: parent是最稳妥的做法。

运行验证

1. Qt Creator 打开qml_text/CMakeLists.txt
2. 按Ctrl+R运行
3. 在左侧导航切换 Text 基础用法、字体属性、文本样式、文本对齐

扩展复用方向

• 把常用字体样式封装成自定义StyledText组件，支持 primary、secondary、caption 等语义化类型
• 用font.weight和letterSpacing做标题层级系统，比如 h1/h2/h3
• 结合Rectangle背景做按钮文字居中模板，避免每次手动写对齐
• 用Text.Outline做可缩放的水印文字

小结

Text的字体、样式和对齐属性虽然简单，但组合起来能覆盖绝大多数文本展示需求。基础样式做内容强调，字体属性做排版精细控制，艺术样式做视觉点缀，对齐属性做布局适配。合理组合这四类属性，就能让界面文字既清晰又有层次感。

已验证环境：

• Qt 版本：Qt 6.11.1
• 操作系统：Windows 11
• 完整代码：https://gitcode.com/u011186532/qml_demo/tree/main/qml_text