当前位置：首页 > 行业动态 > 正文

html声明字体

admin
行业动态
2025-05-05
3297

在HTML中，通过CSS的 font-family属性声明字体，如 body {font-family: 宋体, sans-serif;}，避免使用已废弃的“标签

HTML声明字体的基础方法

在HTML中声明字体主要通过CSS实现,以下是几种常见方式：

直接在HTML标签中使用`<font>`（不推荐）

<!DOCTYPE html>
<html>
<body>
  <font face="Arial" size="4">这是旧版HTML字体声明</font>
</body>
</html>

说明：<font>标签已被HTML5废弃,建议使用CSS替代。

通过内联CSS样式声明字体

<!DOCTYPE html>
<html>
<body>
  <span style="font-family: 'Microsoft YaHei'; font-size: 16px;">内联样式字体</span>
</body>
</html>

特点：

直接作用于单个元素
优先级高于外部/内部样式表
可读性差，维护困难

在`<head>`中使用内部样式表

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: 'Arial', sans-serif; / 首选字体+备选方案 /
      font-size: 14px;
      line-height: 1.6;
    }{
      font-family: 'Georgia', serif;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1 class="title">内部样式表示例</h1>
  <p>段落文字使用Arial字体</p>
</body>
</html>

优势：

html声明字体第1张

集中管理样式
支持媒体查询（响应式设计）
可复用样式类

链接外部CSS文件（推荐）

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p class="content">外部样式表声明的字体</p>
</body>
</html>

外部CSS文件示例（styles.css）：

.content {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 18px;
  color: #333;
}

优点：

彻底分离内容与样式
多页面复用
便于团队协作开发

Web字体引入方法

使用`@font-face`加载自定义字体

<!DOCTYPE html>
<html>
<head>
  <style>
    @font-face {
      font-family: 'MyCustomFont'; / 自定义字体名称 /
      src: url('fonts/myfont.woff2') format('woff2'),
           url('fonts/myfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
    }
    body {
      font-family: 'MyCustomFont', sans-serif;
    }
  </style>
</head>
<body>
  <p>自定义Web字体示例</p>
</body>
</html>

关键参数：

src: 字体文件路径（需多种格式兼容浏览器）
font-weight/font-style: 定义字体变体
备选方案：始终添加通用字体族（如sans-serif）防止加载失败

引入Google Fonts（快速方案）

<!DOCTYPE html>
<html>
<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>
<body>
  <h1>Google Fonts示例</h1>
</body>
</html>

说明：

通过<link>标签引入Google Fonts CSS文件
wght参数控制字重（400=正常，700=加粗）
display=swap优化字体加载体验

字体声明核心属性对照表

属性	说明	取值示例
`font-family`	指定字体族	“Arial”, sans-serif
`font-size`	字体大小	16px/1.2em/larger
`font-weight`	字体粗细	normal/bold/400/700
`font-style`	字体样式	normal/italic/oblique
`line-height`	行高	5/200%/1.6em
`font-variant`	小型大写字母等特殊变体	normal/small-caps

注意事项与最佳实践

优先使用系统安全字体：
- 中文：微软雅黑（Microsoft YaHei）、宋体（SimSun）
- 英文：Arial/Helvetica（无衬线）、Times New Roman（衬线）
- 日韩字体：Noto Sans CJK系列
字体加载性能优化：
- 使用woff2格式（体积最小）
- 通过font-display: swap防止FOIT（Flash of Invisible Text）
- 限制Web字体数量（每个页面不超过3种）
跨平台兼容性：
- 提供至少2种备选字体族
- 使用通用字体族（sans-serif/serif/monospace）作为最终备选
- 测试不同浏览器渲染效果（尤其中文字体）