上一篇
html里面添加字体
- 行业动态
- 2025-04-26
- 2093
在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) 内部样式表
<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
步骤说明:
- 准备字体文件(.ttf/.woff/.otf)
- 定义字体规则
- 调用字体名称
示例代码:
@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:常见原因及解决方法:
- 字体文件路径错误 → 检查 URL 是否正确
- 格式不兼容 → 添加多种格式(.woff/.ttf/.svg)
- 跨域问题 → 将字体文件部署至同源服务器
- 浏览器缓存 → 强制刷新(Ctrl+F5)或清除