在HTML中改变字体主要通过CSS实现，常用font-family属性指定字体类型（如Arial, “微软雅黑”），font-size调整字号，color设置颜色，推荐使用内联样式（style属性）或外部样式表控制，避免已废弃的标签。
核心方法：使用CSS的 font-family 属性
通过font-family指定字体列表（优先使用靠前的字体），基本语法：
<p style="font-family: 'Arial', sans-serif;">示例文本</p>
- 备用机制：如果用户设备没有”Arial”，则使用
sans-serif通用字体族。 - 多单词字体名：用引号包裹（如
"Times New Roman"）。
4种实现方式
内联样式（直接写在HTML标签中）
<p style="font-family: 'Courier New', monospace;">代码风格的文本</p>
- 适用场景：单个元素快速调整。
- 缺点：难以维护，不推荐大面积使用。
内部样式表（<style>标签内）
在HTML的<head>中定义：
<head>
<style>
.custom-text {
font-family: "Georgia", serif;
font-size: 18px; /* 可同时调整大小 */
font-weight: bold; /* 调整粗细 */
}
</style>
</head>
<body>
<p class="custom-text">优雅的衬线字体</p>
</body>
外部样式表（最佳实践）
创建.css文件（如styles.css）：
/* styles.css */
body {
font-family: "Helvetica Neue", Arial, sans-serif; /* 全站默认字体 */
}
{
font-family: "Verdana", sans-serif;
font-size: 24px;
}
HTML中引入：
<head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1 class="title">标题使用Verdana</h1> </body>
- 优势：代码复用、易于维护、符合SEO规范（结构样式分离）。
使用Web字体（如Google Fonts）
步骤：
- 在Google Fonts选择字体（如”Roboto”）。
- 获取代码并添加到
<head>：<head> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> <style> body { font-family: 'Roboto', sans-serif; /* 直接调用 */ } </style> </head>
- 优势：跨设备一致显示。
- 注意：加载外部字体可能影响页面速度（SEO关键指标）。
常用字体属性扩展
| 属性 | 作用 | 示例值 |
|---|---|---|
font-size |
字号 | 16px, 2rem, 120% |
font-weight |
粗细 | normal, bold, 700 |
font-style |
样式 | italic（斜体） |
color |
颜色 | #333333, rgb(255,0,0) |
line-height |
行高 | 5（无单位倍数） |
p {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
line-height: 1.6; /* 提升可读性 */
}
关键注意事项
-
字体兼容性：
- 优先选择系统内置字体（如Windows/macOS/Linux通用字体）。
- 常用安全字体：
font-family: Arial, Helvetica, sans-serif; /* 无衬线 */ font-family: "Times New Roman", Times, serif; /* 衬线 */ font-family: "Courier New", Courier, monospace; /* 等宽 */
-
性能优化：
- Web字体限制在1-2种，避免过多HTTP请求。
- 使用
font-display: swap;（防止文字渲染延迟）：@font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'); font-display: swap; }
-
响应式适配：
- 用相对单位（
rem、）而非固定像素（px）：h1 { font-size: calc(1.5rem + 1vw); } /* 随视口缩放 */
- 用相对单位（
-
可访问性：
- 确保颜色对比度达标（WCAG 2.1标准）。
- 避免纯浅灰字体（如
#CCCCCC）。
为什么推荐外部CSS？
- SEO友好：减少HTML体积，提升加载速度（百度算法核心指标）。
- E-A-T体现：代码规范增强专业性（专家权威度）。
- 维护便捷：全站字体统一修改只需调整一个文件。
引用说明：本文方法遵循W3C CSS标准，参考资源包括MDN Web文档、Google Fonts最佳实践及可访问性指南（WCAG）。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/34736.html
