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

html里面添加字体

在HTML中添加字体可通过CSS设置 font-family或引入外部字体文件

HTML 基础字体设置

通过 HTML 标签直接设置字体（不推荐，属于过时方法）
| 标签 | 说明 | 示例效果 |
|—————|————————–|————————|
| <font> | 设置字体样式（已废弃） | <font color="red"> |
| <face> | 定义字体名称（Netscape） | <face>（仅 IE 支持） |

示例代码：

<p><font face="Arial" size="4" color="blue">这是蓝色 Arial 字体</font></p>

CSS 控制字体样式

字体属性说明

属性 说明 示例值
font-family 指定字体族（可多级备选） Arial, sans-serif
font-size 字体大小 16px / 2rem
font-weight 字体粗细 bold / 400
font-style 字体样式 italic
line-height 行高 5 / 20px

使用方式

(1) 内联样式

<span style="font-family: 'Microsoft YaHei'; font-size: 18px;">内联样式</span>

(2) 内部样式表

html里面添加字体 第1张

<style>
  .custom-text {
    font-family: "SimSun", serif;
    color: #333;
  }
</style>
<p class="custom-text">内部样式表</p>

(3) 外部样式表

/ styles.css /
body {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 16px;
}

引入自定义字体

使用 @font-face

步骤说明：

  1. 准备字体文件（.ttf/.woff/.otf）
  2. 定义字体规则
  3. 调用字体名称

示例代码：

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/myfont.woff2') format('woff2');
  font-weight: normal;
}
.custom-font {
  font-family: 'MyCustomFont', sans-serif;
}

使用 Google Fonts

引入方式：

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<p style="font-family: 'Noto Sans SC', sans-serif;">思源黑体</p>

字体兼容性处理

问题类型 解决方案
字体未加载 添加 font-display: swap 或设置 font-family 多级备选方案
跨平台显示差异 优先使用系统安全字体（如宋体/黑体），避免生僻字体
移动端适配 使用 rem 单位代替 px，配合媒体查询调整字体大小

响应式字体设置

示例代码：

body {
  font-size: 100%; / 基准值 /
}
@media screen and (max-width: 768px) {
  body {
    font-size: 90%;
  }
}

相关问题与解答

Q1：如何设置网页全局默认字体？
A1：通过 CSS 的 body 选择器统一设置， 

body {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
}

Q2：为什么引入的自定义字体无法显示？
A2：常见原因及解决方法：

  1. 字体文件路径错误 → 检查 URL 是否正确
  2. 格式不兼容 → 添加多种格式（.woff/.ttf/.svg）
  3. 跨域问题 → 将字体文件部署至同源服务器
  4. 浏览器缓存 → 强制刷新（Ctrl+F5）或清除
0

相关文章