CSS——字体排版

最新推荐文章于 2025-06-10 20:32:35 发布

原创

最新推荐文章于 2025-06-10 20:32:35 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

本文详细探讨CSS在字体排版方面的技巧，包括连字符断行、换行方法、文本行斑马条纹实现、调整制表符空格、字体连字效果、特殊字符美化、自定义下划线、现实文字效果如凸版、空心字、外发光及文字凸起，以及如何利用SVG创建环形文字。通过这些技巧，提升网页文字的视觉呈现和阅读体验。

1. 连字符断行——英文单词

英文文档下，实现英文单词的断行。

可以通过一些软连字符（）来辅助浏览器进行断词
CSS属性 hyphens接受三个值：none、manual 和 auto

manual 是hyphens属性的初始值，其行为可以在任何时候手工插入软连字符来实现断词折行的效果。而hyphens: none; 会禁用这种行为

<!DOCTYPE html>
<html lang="en"><style> div {width: 8.7em;font: 180%/1.4 Baskerville, serif;text-align: justify;background: #ccc;margin-top: 10px;}.app {/*禁用软连字符（`&shy;`）断行 */hyphens: none;} </style><body><div>“The only way to get rid of a temptation is to yield to it.”</div><div>“The only way to get rid of a tempta&shy;tion is to yield to it.”</div><div class="app">“The only way to get rid of a tem&shy;ptation is to yield to it.”</div></body>
</html>

2. 换行

2.1 `<br>` 元素换行

2.2 Unicode 换行字符`\A`

一个专门代表换行符的Unicode 字符：0x000A。在 CSS 中，这个字符可以写作 “\000A”，或简化为 “\A”。我们可以用它来作为 ::after伪元素的内容，并将其添加到每个 <dd> 元素的尾部

在 HTML 代码中输入换行符，默认情况下，这些换行符会与相邻的其他空白符进行合并。需要用 white-space: pre;保留源代码中的这些空白符和换行

<!DOCTYPE html>
<html lang="en"><style> dt,dd {display: inline;margin: 0;}dd {font-weight: 600;}/*对 <dt> 之前的最后一个 <dd> 来插入换行*/dd + dt::before {content: "\A";white-space: pre;}/*在每个前面有<dd> 的 <dd> 头部插入逗号*/dd + dd::before {content: ", ";font-weight: normal;margin-left: -0.25em;}body {font: 150%/1.6 Baskerville, Palatino, serif;} </style><body><dl><dt>Name:</dt><dd>Lea Verou</dd><dt>Email:</dt><dd>lea@verou.me</dd><dd>leaverou@mit.edu</dd><dt>Location:</dt><dd>Earth</dd></dl></body>
</html>

3. 文本行的斑马条纹

对整个元素设置统一的背景图像，一次性加上所有的斑马条纹。

可以在CSS 中用渐变直接生成背景图像，而且可以用 em 单位来设定背景尺寸，这样背景就可以自动适配font-size 了。

<!DOCTYPE html>
<html lang="en"><style> pre {padding: 0.5em;line

最低0.47元/天解锁文章