如何通过css tachyons控制间距与字体样式

使用CSS Tachyons可通过预定义类高效控制布局与排版。1. 间距类：ma1–ma6、pa1–pa6设置外边距和内边距，mt3、mb4等控制单方向，mx-auto实现水平居中；2. 字体类：f1–f6设定字号，fw1–fw9调整粗细，black、tc等设置颜色与对齐；3. 排版增强：lh-copy优化行高，measure限制行宽提升可读性；4. 响应式支持：如f3 f2-ns在不同屏幕适配字体。组合这些类可快速构建响应式界面，无需自定义CSS。

使用 CSS Tachyons 控制间距和字体样式非常高效，它通过一系列预定义的类名实现快速布局与排版。以下是具体用法说明。

控制间距（Margin 与 Padding）

CSS Tachyons 提供简洁的类名来设置外边距和内边距，单位基于 0.25rem 的倍数（默认为 4px 步长）。

• ma1 到 ma6：设置所有方向的外边距，数值越大间距越大（如 ma3 = 1rem）
• mt3、mb4、ml2、mr5：分别控制上、下、左、右外边距
• mx-auto：水平居中，等同于 margin: 0 auto;
• mx3：同时设置左右外边距为 0.75rem
• my4：同时设置上下外边距为 1rem

• pa1 到 pa6：设置四个方向的内边距
• pt2、pb3、pl1、pr5：分别控制上、下、左、右内边距
• px4 py2：设置左右内边距为 1rem，上下为 0.5rem

例如：

<div class="mt3 mb4 px3 py2">内容区块</div>

表示：上外边距 0.75rem、下外边距 1rem、左右内边距 0.75rem、上下内边距 0.5rem。

立即学习“前端免费学习笔记（深入）”；

美间AI

美间AI：让设计更简单

45

查看详情

设置字体样式与文本排版

CSS Tachyons 提供丰富的文本类来控制字体大小、颜色、粗细和对齐方式。

• f1：最大字号（约 3rem）
• f2, f3, f4, f5, f6：依次减小，f6 最小（约 1rem）
• fw1 到 fw9：字体粗细，fw4 是 normal，fw7 是 bold

• black、dark-gray、mid-gray、white：常用文本颜色
• tc：文本居中（text-align: center）
• tl：左对齐，tr：右对齐
• lh-copy：设置行高为 1.5，适合段落阅读
• measure：限制每行字符数（约 60ch），提升可读性

示例：

<h1 class="f2 fw7 mt4 mb3 black tc">标题文本</h1>
<p class="f5 lh-copy measure">这是一段可读性强的正文内容。</p>

响应式辅助类（可选增强）

若引入完整 Tachyons 框架，还可使用响应式类：

• f3 f2-ns：在大屏幕上为 f3，窄屏为 f2
• mt4 mt2-ns：宽屏用大间距，窄屏缩小

基本上就这些。通过组合这些类，你可以快速构建美观且响应式的界面，无需写自定义 CSS。关键是熟悉命名规则，就能高效使用。不复杂但容易忽略细节。

以上就是如何通过css tachyons控制间距与字体样式的详细内容，更多请关注php中文网其它相关文章！