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

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