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

HTML如何设置字体？

admin
前端开发
2025-06-20
4724

在HTML中设置字体类型使用CSS的font-family属性，通过内联样式、内部或外部CSS为元素指定字体栈， font-family: Arial, sans-serif;，优先使用系统安全字体确保兼容性，建议同时声明通用字体族作为后备方案。

在HTML中设置字体类型主要依赖CSS的font-family属性,以下是详细方法及注意事项：

核心方法：使用`font-family`属性

通过CSS指定字体栈（按优先级排列的字体列表）,确保跨设备兼容性：

<p style="font-family: 'Arial', sans-serif;">示例文本</p>

字体栈规则：优先使用第一个字体，若用户设备不存在则向后回退（如Arial不可用时使用sans-serif通用字体族）。

三种实现方式

内联样式（直接写在HTML标签内）

<h1 style="font-family: 'Georgia', serif;">标题文本</h1>

内部样式表（在<style>标签中定义）

HTML如何设置字体？第1张

<head>
  <style>
    body {
      font-family: 'Helvetica Neue', Arial, sans-serif;
    }
  </style>
</head>

外部样式表（最佳实践,便于维护）

/* styles.css 文件 */
.content {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

HTML中引入：

<link rel="stylesheet" href="styles.css">
<div class="content">正文内容</div>

使用自定义字体（如Google Fonts）

引入外部字体（以Google Fonts为例）：

<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>

自托管字体（通过@font-face）：

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2');
}
p {
  font-family: 'MyCustomFont', serif;
}

关键注意事项

字体可用性：
- 优先使用系统预装字体（如Arial、Georgia）
- 通用字体族作为兜底（serif, sans-serif, monospace）
版权问题：
- 商业字体需授权（如Adobe字体）
- 免费资源推荐：Google Fonts、Fontsource
性能优化：
- 限制自定义字体数量（3种）
- 使用woff2格式（压缩率更高）
- 添加font-display: swap;避免文本渲染阻塞
跨平台兼容：
- Windows常用：Segoe UI, Arial
- macOS常用：San Francisco, Helvetica
- 中文字体示例：font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;

完整示例

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Open Sans', 'Segoe UI', sans-serif; /* 优先使用Open Sans */
      line-height: 1.6;
    }
    code {
      font-family: 'Courier New', monospace; /* 代码用等宽字体 */
    }
  </style>
</head>
<body>
  <h1>网页标题</h1>内容：使用无衬线字体提升可读性</p>
  <code>console.log("等宽字体用于代码");</code>
</body>
</html>