CSSTachyons间距字体设置教程

CSS Tachyons 以极简、语义化的预定义类名，让开发者无需编写一行自定义 CSS 就能高效掌控间距布局与字体排版——从 ma3、pa4 等直观的边距类，到 f4、fw7、lh-copy、measure 等精准的文本控制，再到 f3 f2-ns 这类无缝响应式组合，它用一致的命名规则和基于 rem 的可预测缩放体系，将复杂样式简化为可读性强、易组合、易维护的原子化类名，真正实现“写 HTML 即写样式”，大幅提升响应式界面开发速度与一致性。

使用 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。

设置字体样式与文本排版

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。关键是熟悉命名规则，就能高效使用。不复杂但容易忽略细节。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~