VaporCSS text样式写法参考

字体大小

CSS 类	样式	备注
s-40	font-size:40rpx;	字体大小 40rpx
s-16px	font-size:16px;	字体大小 16px

字体粗细

CSS 类	样式	备注
sfw-400	font-weight: 400;	字体粗细 400
sfw-blob	font-weight: bold;	字体粗细 bold
sfwb	font-weight: bold;	字体粗细 bold
sfwn	font-weight:400;	字体粗细 400

文本对齐

CSS 类	样式	备注
sta-c	text-align:center;	文本居中对齐
sta-r	text-align:right;	文本右对齐
sta-l	text-align:left;	文本左对齐

文本溢出

CSS 类	样式	备注
l-1	lines:1;white-space:nowrap;	单行文本，超出截断
sto-e	text-overflow:ellipsis;	文本溢出显示省略号

行高

CSS 类	样式	备注
slh-20	line-height:20rpx;	行高 20rpx
slh-15px	line-height:15px;	行高 15px

字间距

CSS 类	样式	备注
sls-10	letter-spacing:10rpx;	字间距 10rpx
sls-8px	letter-spacing:8px;	字间距 8px

文本装饰

CSS 类	样式	备注
stdl	text-decoration-line:none;	无文本装饰
stdl-n	text-decoration-line:none;	无文本装饰
stdl-u	text-decoration-line:underline;	下划线
stdl-o	text-decoration-line:overline;	上划线
stdl-l	text-decoration-line:line-through;	删除线
stdl-b	text-decoration-line:blink;	闪烁效果

文本颜色

CSS 类	样式	备注
c-red	color:red;	红色文本
c-#ccc	color:#ccc;	自定义颜色文本

单词换行

CSS 类	样式	备注
swb-b	word-break:break-all;	单词换行

使用示例

基本文本样式

<!-- 字体大小和粗细 -->
<text class="s-24 sfwb">粗体文本</text>

<!-- 文本对齐 -->
<text class="sta-c s-20">居中对齐文本</text>

<!-- 文本颜色 -->
<text class="c-red s-18">红色文本</text>

复杂文本样式

<!-- 多行文本溢出 -->
<view class="w-200">
  <text class="l-1 sto-e">这是一段很长的文本，超出容器宽度后会被截断并显示省略号</text>
</view>

<!-- 自定义行高和字间距 -->
<text class="slh-28 sls-2 s-20">设置了行高和字间距的文本</text>

<!-- 文本装饰 -->
<text class="stdl-u c-blue">带下划线的蓝色文本</text>
<text class="stdl-l c-gray">带删除线的灰色文本</text>

组合使用

<!-- 完整的文本样式组合 -->
<view class="p-20 bg-gray-100">
  <text class="s-24 sfwb sta-c c-primary slh-32 sls-1">
    标题文本
  </text>
  <text class="s-16 sfwn sta-l c-gray-600 slh-24 mt-10">
    这是一段正文文本，包含了字体大小、粗细、对齐方式、颜色、行高等多种样式。
  </text>
</view>

最佳实践

1. 语义化使用：根据文本的语义选择合适的样式类
2. 一致性：在项目中保持文本样式的一致性
3. 响应式：使用 rpx 单位实现响应式文本大小
4. 可读性：合理设置行高和字间距，提高文本可读性
5. 性能优化：避免过度使用文本样式类，减少 CSS 体积
6. 与主题配合：结合主题系统的颜色变量，保持设计一致性

常见使用场景

标题样式

<text class="s-32 sfwb c-primary slh-40">主标题</text>
<text class="s-28 sfwb c-gray-800 slh-36 mt-10">副标题</text>
<text class="s-24 sfwb c-gray-700 slh-32 mt-8">三级标题</text>

正文样式

<text class="s-16 sfwn c-gray-600 slh-24">
  这是一段正文文本，字体大小为 16rpx，行高为 24rpx，颜色为灰色。
  合理的行高和字间距可以提高文本的可读性。
</text>

标签样式

<view class="inline-block px-12 py-4 bg-primary/10 rounded-md">
  <text class="s-14 sfwb c-primary">标签文本</text>
</view>

链接样式

<text class="s-16 c-blue stdl-u hover:underline">
  链接文本
</text>

通过 VaporCSS 文本系统，您可以轻松实现各种文本样式效果，提高开发效率，同时保持代码的清晰和可维护性。