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

html中常用字体

HTML常用字体包括Serif（如Times New Roman）、Sans-serif（如Arial）、Monospace（如Courier），中文常用宋体、黑体，通过CSS属性

常用字体分类与用法

安全字体（Web Safe Fonts）

安全字体是早期浏览器普遍支持的字体，可确保大多数设备显示一致,推荐搭配多个备选字体以提高兼容性。

字体名称 适用场景 示例代码
Times New Roman 正式文档、印刷效果 body { font-family: "Times New Roman", Times, serif; }
Arial 通用界面、简洁设计 h1 { font-family: Arial, Helvetica, sans-serif; }
Verdana 屏幕可读性优先 p { font-family: Verdana, Geneva, sans-serif; }
Trebuchet MS 圆润风格 .title { font-family: "Trebuchet MS", Helvetica, sans-serif; }
Georgia 优雅易读 .article { font-family: Georgia, serif; }
Courier New 等宽代码显示 code { font-family: "Courier New", Courier, monospace; }

中文常用字体

中文字体需注意版权问题,优先使用系统默认字体或免费商用字体。

字体名称 适用场景 示例代码
微软雅黑 界面设计、通用场景 body { font-family: "Microsoft YaHei", "微软雅黑", sans-serif; }
宋体 正式文档、政府网站 .content { font-family: "SimSun", "宋体", serif; }
黑体 标题、强调文本 h2 { font-family: "SimHei", "黑体", sans-serif; }
苹方（iOS） Apple设备默认 button { font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif; }
思源字体 开源免费商用 @font-face { font-family: "Source Han Sans"; src: url('source-han-sans.css'); }

自定义字体嵌入

通过 @font-face 或在线服务引入特殊字体,需注意版权和性能。

使用 @font-face：

@font-face {
  font-family: 'CustomFont';
  src: url('fonts/CustomFont.woff2') format('woff2'),
       url('fonts/CustomFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
.text {
  font-family: 'CustomFont', sans-serif;
}

通过 Google Fonts 引入：

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">
<style>
  body {
    font-family: 'Roboto', sans-serif;
  }
</style>

注意事项

  • Fallback机制：始终提供多个备选字体（如 font-family: "Arial", sans-serif;）,避免因字体缺失导致布局错乱。
  • 字体加载优化：使用 font-display: swap 加快渲染，或通过工具（如 Font Face Observer）实现无闪烁加载。
  • 中文字体兼容性：Windows/Mac/Linux 系统默认字体差异大，建议优先使用跨平台覆盖率高的字体（如微软雅黑）。

问题与解答

Q1：如何为中文页面选择安全的字体组合？
A1：优先使用系统默认中文字体（如微软雅黑、宋体），并搭配通用英文字体族。 

body {
  font-family: "Microsoft YaHei", "Heiti SC", sans-serif; / 覆盖中英文环境 /
}

Q2：自定义字体加载过慢怎么办？
A2：

  1. 使用 font-display: optional 或 block 控制加载策略（需浏览器支持）。
  2. 通过工具压缩字体文件（如 .woff2 格式）。
  3. 仅对关键元素（如标题）使用自定义
CSS字体fontfamilyWeb安全字体
0

相关文章