当前位置：首页 > 前端开发 > 正文

如何在HTML中改变字体？

admin
前端开发
2025-06-22
3881

在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）：

如何在HTML中改变字体？第1张

/* 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; /* 提升可读性 */
}

关键注意事项

字体兼容性：

如何在HTML中改变字体？第2张

优先选择系统内置字体（如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）。