CSS 字体与文本样式文本样式在 CSS 中如何设置-css教程-PHP中文网

CSS 字体与文本样式文本样式在 CSS 中如何设置

看不見的法師

发布： 2025-07-16 10:15:02

原创

482人浏览过

设置css文本样式的核心属性包括font-family、font-size、color等，通过这些属性可控制字体、颜色、大小及排版。优化字体加载需选择少量字体组合、使用本地优先与web字体子集、合理设置font-display、预加载首屏字体并采用woff2格式。文本样式影响用户体验和可访问性，需确保可读性、语义化结构、隐藏文本技巧及响应式设计。处理文本溢出时，单行用white-space、overflow、text-overflow组合，多行借助webkit-line-clamp属性，强制换行或不换行则使用word-break或white-space属性。

CSS 字体与文本样式文本样式在 CSS 中如何设置

设置CSS文本样式，主要通过一系列属性来控制字体、颜色、大小、对齐方式以及各种排版细节。它不仅仅是让文字显示出来，更是赋予内容生命力，引导读者视线，传达信息情感的关键。

这里我会列出一些核心的CSS属性，它们是构建网页文本外观的基石。

font-family: 决定文本使用哪种字体。比如 font-family: 'PingFang SC', 'Helvetica Neue', sans-serif;。我通常会设定一个字体栈，确保在用户系统没有首选字体时，能有合适的备用。
font-size: 控制文本大小。用 px、em、rem 或 vw 都行，我个人偏爱 rem，因为它更利于响应式布局，以根元素的字体大小为基准，改一个地方就能影响全局。
color: 文本颜色。color: #333; 或者 color: rgb(51, 51, 51);。
font-weight: 字体粗细。font-weight: bold; 或 font-weight: 700;。我发现数字表示法更精确，也更符合字体文件的权重定义。
font-style: 字体样式，比如斜体 italic。
text-align: 文本对齐方式，left, right, center, justify。在设计中，居中对齐用得慎重，因为大段文字居中会降低阅读体验。
line-height: 行高。这玩意儿对阅读舒适度影响巨大，通常设置为字体大小的1.5倍左右是个不错的起点，比如 line-height: 1.6;。
text-decoration: 文本装饰，比如下划线 underline。我一般会把链接的默认下划线去掉，然后用 :hover 伪类再加回来，或者用边框模拟，这样视觉效果更佳。
text-transform: 文本大小写转换，uppercase, lowercase, capitalize。
letter-spacing 和 word-spacing: 字间距和词间距。微调这些能让标题或特殊文本更具美感。
white-space: 处理元素内的空白符，比如 nowrap 防止文本换行。
text-shadow: 给文本加阴影，增加层次感。

p {
    font-family: 'PingFang SC', 'Helvetica Neue', sans-serif;
    font-size: 1rem; /* 相对根元素字体大小 */
    color: #333;
    line-height: 1.6;
    text-align: justify; /* 两端对齐 */
    letter-spacing: 0.02em; /* 微调字间距 */
}

h1 {
    font-family: 'Georgia', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a1a1a;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

a {
    color: #007bff;
    text-decoration: none; /* 移除默认下划线 */
}

a:hover {
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

登录后复制

如何选择合适的字体组合并优化加载性能？

选择字体组合，说实话，是个艺术活儿，但也有章可循。我通常会遵循“少即是多”的原则，主字体（body text）和辅助字体（headings, special elements）最多两到三种。衬线字体（serif）和非衬线字体（sans-serif）的搭配很经典，比如标题用衬线体，正文用非衬线体，或者反过来，制造对比。关键是它们要和谐，不能打架。Google Fonts 和 Adobe Fonts 是我常用的资源库，它们有很多免费或付费的优质字体。

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

至于性能，字体文件往往是网页加载的“大头”。我的优化策略通常包括：

本地字体优先: 如果用户系统有我想要的字体，直接用本地的，比如 font-family: 'PingFang SC', sans-serif;，PingFang SC 是 macOS 上的系统字体。
Web Font Subset: 只加载需要的字符集。如果我只用英文字母和数字，没必要加载整个中文字体包，那文件会大到离谱。
font-display 属性: 这是个神器，它控制字体加载完成前的行为。我常用 swap 或 fallback。swap 会先用系统默认字体显示文本，字体加载完成后再“交换”过来，用户体验会好很多，避免了白屏或者文本消失（FOIT, Flash of Invisible Text）。fallback 则是给一个很短的加载时间，如果超时就用系统字体，加载完成后再交换。
预加载 (preload): 对于首屏字体，可以考虑用 <link rel="preload" href="your-font.woff2" as="font" type="font/woff2" crossorigin> 提前加载，提高渲染速度。
WOFF2 格式: 优先使用 WOFF2 格式，它的压缩率是最好的，文件最小。

/* 字体加载策略示例 */
@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont.woff2') format('woff2'),
         url('fonts/MyCustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* 优先显示系统字体，加载完成后再替换 */
}

body {
    font-family: 'MyCustomFont', 'PingFang SC', 'Helvetica Neue', sans-serif;
}

登录后复制

CSS 文本样式如何影响用户体验和可访问性？

文本样式绝不仅仅是美观，它直接关系到用户能否轻松阅读和理解内容，这其中就包含了用户体验和可访问性。

mPDF

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），包括边距、边框、填充、行高、背景颜色等。支持从右到左的语言，并自动检测文档中的RTL字符。转置表格、列表、文本

查看详情

可读性: 这是最核心的。字体大小不能太小，行高不能太密或太疏，颜色对比度要足够高。比如，白色背景上的浅灰色文字，对视力不好的人来说简直是灾难。我通常会用一些在线工具检查颜色对比度，确保符合 WCAG (Web Content Accessibility Guidelines) 的标准。
可访问性: 屏幕阅读器依赖语义化的HTML结构，但CSS样式也扮演着辅助角色。
- 语义化标签: 使用 <h1> 到 <h6> 表示标题层级，<p> 表示段落，而不是用 <div> 然后用 CSS 模拟字体大小和粗细。
- 隐藏文本: 如果需要为屏幕阅读器提供额外信息，但不想在视觉上显示，可以用 sr-only 类，而不是 display: none（因为它会彻底隐藏内容）。
- alt 属性: 图片的 alt 文本很重要，虽然不是CSS直接控制，但它和文本内容是相辅相成的。
视觉层级: 通过字体大小、粗细、颜色、间距的变化，来区分标题、正文、引用、注释等，帮助用户快速扫描和理解页面结构。一个页面如果所有文本都一样大、一样粗，那阅读起来会非常吃力。
响应式设计: 确保文本在不同设备上都能良好显示。我经常用 rem 或 em 单位来设置字体大小和行高，配合媒体查询调整根元素的 font-size，这样文本就能根据屏幕大小自适应。

一个糟糕的文本样式，比如过小的字体、低对比度的颜色、过长的行宽，都会让用户感到疲惫，甚至直接关闭页面。反之，清晰、易读、层级分明的文本，能极大提升用户留存率和满意度。

在复杂布局中如何优雅处理文本溢出和换行？

文本溢出和换行，这是个老生常谈但又让人头疼的问题，尤其是在响应式设计和卡片式布局中。

单行文本溢出: 如果我只想让文本显示一行，超出部分用省略号表示，我会用到这三件套：
```
.single-line-ellipsis {
    white-space: nowrap; /* 强制不换行 */
    overflow: hidden;    /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 显示省略号 */
}
```
登录后复制
这个组合拳很实用，但只对单行有效。
多行文本溢出: 这就有点麻烦了，CSS 原生支持并不完美。我通常会用到 webkit-line-clamp，虽然它是个 Webkit 私有属性，但在现代浏览器中的兼容性已经很不错了，尤其是移动端。
```
.multi-line-ellipsis {
    display: -webkit-box; /* 必须 */
    -webkit-line-clamp: 3; /* 显示3行 */
    -webkit-box-orient: vertical; /* 必须 */
    overflow: hidden;
    text-overflow: ellipsis; /* 理论上这里也可以加，但效果不总是理想 */
}
```
登录后复制
如果需要更强大的多行溢出控制，或者要兼容老旧浏览器，可能就需要 JavaScript 介入了。
强制换行与不换行:
- word-break: break-all; 或 word-wrap: break-word; (现在推荐 overflow-wrap: break-word;)：当单词太长超出容器时，强制在单词内部断开，防止溢出。
- white-space: pre-wrap;：保留空白符和换行符，但会在需要时自动换行。这在显示用户输入或代码片段时很有用。
- white-space: nowrap;：强制所有文本不换行，除非遇到 <br>。