掌握字体、文本样式和现代排版技术
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.code {
font-family: 'Courier New', monospace;
}/* 使用 @font-face 加载自定义字体 */
@font-face {
font-family: 'MyCustomFont';
src:
url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}| 值 | 描述 | 适用场景 |
|---|---|---|
| auto | 浏览器默认行为 | 一般情况 |
| swap | 立即显示系统字体，加载完成后替换 | 正文文本 |
| block | 隐藏文本直到字体加载完成 | 标题 |
| fallback | 短时间隐藏，然后使用系统字体 | 平衡方案 |
| optional | 仅在快速加载时使用，否则使用系统字体 | 非关键文本 |
/* 设置根元素字体大小 */
html {
font-size: 16px;
}
/* 使用 rem 单位 */
h1 {
font-size: 2rem; /* 32px */
}
p {
font-size: 1rem; /* 16px */
}p {
line-height: 1.6; /* 推荐值：1.5-1.8 */
letter-spacing: 0.01em; /* 字间距 */
text-indent: 2em; /* 首行缩进 */
}a {
text-decoration: none; /* 移除下划线 */
}
a:hover {
text-decoration: underline; /* 悬停时显示下划线 */
}
.strikethrough {
text-decoration: line-through; /* 删除线 */
}
.underline {
text-decoration: underline; /* 下划线 */
}
.overline {
text-decoration: overline; /* 上划线 */
}.text-overflow {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}h2 {
text-wrap: balance;
}h1 {
text-wrap: pretty;
}L orem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
p::first-letter {
float: left;
font-size: 3em;
line-height: 1;
margin-right: 0.2em;
color: #3498db;
}