CSS自定义字体与HTML文本字体样式详解
在网页开发中，字体样式直接影响用户的阅读体验和页面的视觉效果。CSS提供了灵活的方式来自定义字体，同时HTML中的文本样式属性可以精细控制文字的外观。本文将详细介绍如何使用CSS定义自定义字体（@font-face规则），以及HTML中常用的文本字体样式属性，帮助您轻松打造专业化的网页排版。
一、CSS自定义字体：@font-face规则
当网页需要使用非系统自带的字体时，可以通过CSS的@font-face规则引入外部字体文件。通过这种方式，即使用户的电脑上没有安装该字体，页面也能正常显示。常用的字体格式包括WOFF2、WOFF、TTF、OTF和EOT，其中WOFF2的压缩率最高，推荐优先使用。
基本语法如下：
@font-face {
font-family: 'MyCustomFont'; /* 自定义字体名称 */
src: url('fonts/mycustomfont.woff2') format('woff2'),
url('fonts/mycustomfont.woff') format('woff'),
url('fonts/mycustomfont.ttf') format('truetype');
font-weight: normal; /* 可选，定义字重 */
font-style: normal; /* 可选，定义样式 */
}使用自定义字体时，只需在目标元素的font-family属性中引用定义的名称即可：
body {
font-family: 'MyCustomFont', sans-serif;
}如果需要定义多种字重或样式（例如粗体、斜体），可以分别编写多个@font-face规则，并指定不同的font-weight和font-style值：
/* 常规字体 */
@font-face {
font-family: 'CustomFont';
src: url('fonts/custom-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
/* 粗体 */
@font-face {
font-family: 'CustomFont';
src: url('fonts/custom-bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
/* 斜体 */
@font-face {
font-family: 'CustomFont';
src: url('fonts/custom-italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
}使用自定义字体时有一些注意事项：
- 字体文件需要存放在服务器上，跨域问题需通过CORS解决。
- 建议提供多种格式以兼容不同浏览器，推荐的优先级为WOFF2高于WOFF，WOFF高于TTF，TTF高于EOT。
- 使用unicode-range属性可以指定字体覆盖的字符范围，从而减少文件体积。
二、HTML中的文本字体样式
除了自定义字体，HTML和CSS还提供了一系列属性来控制文本的外观。下面逐一介绍这些常用属性。
1. font-family：字体族
font-family属性用于定义文本使用哪种字体。可以指定单个字体，也可以提供备选字体列表（用逗号分隔），浏览器会从左到右依次查找可用的字体。例如：
p {
font-family: 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif;
}通用字体族（例如serif、sans-serif、monospace）应放在列表的最后作为兜底方案。
2. font-size：字体大小
font-size属性可以使用绝对单位（如px、pt、cm）或相对单位（如em、rem、%、vw等）。常见写法如下：
h1 { font-size: 2rem; } /* 相对于根元素字体大小 */
p { font-size: 16px; }推荐使用rem或em来实现响应式缩放，而px适合用于固定尺寸的场景。
3. font-weight：字体粗细
font-weight属性的取值范围是100到900，也可以使用关键字：normal（对应400）、bold（对应700）、lighter、bolder。需要注意的是，部分字体只支持特定的字重。
strong { font-weight: bold; }
.light { font-weight: 300; }4. font-style：字体样式
font-style属性可选值包括：normal（正常）、italic（斜体）、oblique（倾斜，与italic类似但由算法生成）。
em { font-style: italic; }5. color：文字颜色
color属性支持十六进制、RGB、HSL、关键字等多种表示方式。例如：
.header { color: #333; }
.announce { color: rgb(255, 100, 50); }6. text-align：水平对齐方式
text-align属性用于控制文本在块元素内的水平位置，可取值包括left、right、center、justify（两端对齐）。
.centered { text-align: center; }
.justified { text-align: justify; }7. text-decoration：文本装饰
text-decoration属性的常见值包括：none（无装饰）、underline（下划线）、overline（上划线）、line-through（删除线）。可以组合使用，也可以指定线型、颜色等。
a { text-decoration: underline; }
.done { text-decoration: line-through; }8. line-height：行高
line-height属性用于设置行间距，通常使用数字（倍数，例如1.5）或无单位的值，也可以使用固定长度。例如：
p { line-height: 1.6; } /* 行高为字体大小的1.6倍 */9. letter-spacing 与 word-spacing：字符间距与单词间距
letter-spacing和word-spacing属性可以设置正负值，单位常用px或em。
.spaced { letter-spacing: 2px; word-spacing: 4px; }10. text-indent：首行缩进
text-indent属性常用于段落首行缩进，单位使用px或em。
p { text-indent: 2em; }11. white-space：空白符处理
white-space属性用于控制元素内文本换行和空白符的显示方式。常用值包括：
- normal：合并空白符，自动换行。
- nowrap：合并空白符，不换行。
- pre：保留空白符和换行，效果类似 <pre> 标签。
- pre-wrap：保留空白符，自动换行。
.code-snippet { white-space: pre; }12. text-transform：文本转换
text-transform属性用于改变文字的大小写，可选值包括uppercase（全部大写）、lowercase（全部小写）、capitalize（首字母大写）。
h2 { text-transform: uppercase; }三、综合示例
以下示例综合运用了自定义字体和多种文本样式，展示了一个标题和段落的排版效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体样式示例</title>
<style>
/* 自定义字体 */
@font-face {
font-family: 'MyFont';
src: url('fonts/myfont.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
body {
font-family: 'MyFont', 'Microsoft YaHei', sans-serif;
color: #333;
line-height: 1.8;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
}
h1 {
font-size: 2rem;
font-weight: 700;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
color: #2c3e50;
margin-bottom: 0.8em;
}
p {
text-indent: 2em;
margin-bottom: 1em;
}
.highlight {
color: #e74c3c;
font-weight: bold;
text-decoration: underline;
}
.code {
font-family: 'Courier New', monospace;
background-color: #eee;
padding: 2px 6px;
border-radius: 3px;
}
.note {
font-style: italic;
color: #7f8c8d;
text-align: right;
margin-top: 2em;
}
</style>
</head>
<body>
<h1>CSS字体样式展示</h1>
<p>这是一段使用了自定义字体 “MyFont” 的正文。文字颜色为深灰色，首行缩进两字符，行高1.8倍，段落之间保持适当间距。</p>
<p>其中 <span class="highlight">高亮部分</span> 使用了红色加粗和下划线，突出显示重要内容。<span class="code">inline code</span> 则用了等宽字体和浅灰背景。</p>
<p class="note">注：本页使用了@font-face技术，即使本地未安装字体也可正常渲染。</p>
</body>
</html>在这个示例中，我们定义了一个名为"MyFont"的自定义字体，然后在body中应用。标题使用了text-transform:uppercase和letter-spacing来增加字母间距。段落通过text-indent实现了缩进效果，highlight部分则组合使用了color、font-weight和text-decoration属性。
四、字体兼容性与性能建议
在使用自定义字体时，应注意以下几点：
- 字体文件需要加载，可能会影响页面渲染速度。可以使用font-display属性控制加载行为，可选值包括swap（先显示后备字体，等自定义字体加载后再替换）、block（短暂阻塞渲染）、fallback（短时间阻塞）、optional（不强求加载）。
@font-face {
font-family: 'MyFont';
src: url('fonts/myfont.woff2') format('woff2');
font-display: swap; /* 推荐使用swap，提升用户体验 */
}- 建议只包含所需的字符集（例如通过subset工具裁剪），以缩小文件体积。
- 对于跨站字体引用，需要注意使用CORS。如果字体文件来自CDN（例如Google Fonts），通常已经处理好了这个问题。
五、总结
本文介绍了CSS自定义字体的@font-face规则，以及HTML文本字体样式的常用属性，包括font-family、font-size、font-weight、font-style、color、text-align、text-decoration、line-height、letter-spacing、text-indent、white-space和text-transform。通过合理组合这些属性，可以创造出丰富多样的排版效果。同时，在实际项目中应注意字体加载性能与兼容性，确保用户获得良好的浏览体验。