HTML字体和CSS字体有哪些

发布时间：2022-02-23 09:56:25 作者：小新
来源：亿速云阅读：311

# HTML字体和CSS字体有哪些

## 前言

在网页设计中，字体的选择和应用直接影响用户体验和视觉呈现。HTML和CSS作为网页开发的核心技术，提供了多种字体控制方式。本文将全面解析HTML和CSS中的字体类型、属性及实际应用方案。

## 一、HTML中的字体控制

### 1.1 传统HTML字体标签（已废弃）

```html
<font face="Arial" size="4" color="red">示例文本</font>

face：指定字体名称
size：取值1-7（已废弃）
color：字体颜色（建议用CSS替代）

注意：HTML5已废弃<font>标签，推荐使用CSS进行样式控制。

1.2 现代HTML字体相关元素

标题元素：
```
<h1>~<h6> 不同级别的标题
```

文本语义元素：

<strong>加粗强调</strong>
<em>斜体强调</em>
<small>小号文本</small>

预格式文本：

<pre>保留空格和换行的文本</pre>

二、CSS字体系统详解

2.1 CSS字体属性全家福

属性	说明	示例值
font-family	字体族	“Microsoft YaHei”, sans-serif
font-size	字号	16px / 1.2rem
font-weight	字重	normal / bold / 700
font-style	样式	italic / oblique
font-variant	变体	small-caps
line-height	行高	1.5 / 24px
font	简写	italic bold 16px/1.5 “Arial”

2.2 核心字体属性详解

2.2.1 font-family 字体族

通用字体族分类： 1. Serif（衬线体）：Times New Roman, 宋体 2. Sans-serif（无衬线体）：Arial, 微软雅黑 3. Monospace（等宽字体）：Courier New, Consolas 4. Cursive（手写体）：Comic Sans MS 5. Fantasy（艺术体）：Impact

最佳实践：

body {
  font-family: "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", 
               "Microsoft YaHei", sans-serif;
}

2.2.2 font-size 字号单位

单位类型	说明	特点
px	像素	绝对单位
em	相对父元素	复合计算
rem	相对根元素	推荐使用
%	百分比	相对父元素
vw/vh	视窗单位	响应式设计

响应式字体示例：

html {
  font-size: 16px; /* 基准值 */
}
h1 {
  font-size: 2rem; /* 32px */
}
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

2.2.3 font-weight 字重控制

常用值： - 关键词：normal(400), bold(700) - 数值：100-900（整百数）

中文字体注意：多数中文字体仅支持normal和bold两种字重

2.2.4 line-height 行高规范

推荐值： - 正文：1.5-1.8 - 标题：1.2-1.5 - 代码：至少1.5

p {
  line-height: 1.6; /* 无单位表示倍数 */
}

2.3 Web字体技术

2.3.1 @font-face 规则

@font-face {
  font-family: 'MyCustomFont';
  src: url('font.woff2') format('woff2'),
       url('font.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* 字体加载策略 */
}

2.3.2 字体格式比较

格式	特点	兼容性
WOFF2	压缩率最高	现代浏览器
WOFF	广泛支持	IE9+
TTF/OTF	原始格式	部分支持
EOT	IE专用	IE6-11

2.3.3 字体服务

Google Fonts（免费）
Adobe Fonts（付费）
字蛛（中文字体压缩工具）

三、字体应用最佳实践

3.1 字体栈设计原则

/* 西文字体栈 */
font-family: -apple-system, BlinkMacSystemFont, 
             "Segoe UI", Roboto, Oxygen-Sans, 
             Ubuntu, Cantarell, sans-serif;

/* 中文字体栈 */
font-family: "PingFang SC", "Hiragino Sans GB", 
             "Microsoft YaHei", "WenQuanYi Micro Hei", 
             sans-serif;

3.2 性能优化方案

字体子集化：仅包含使用的字符

preload预加载：


<link rel="preload" href="font.woff2" as="font" crossorigin>

FOUT/FOIT控制：
```
@font-face {
 font-display: swap;
}
```

3.3 动态字体加载

const font = new FontFace('MyFont', 'url(myfont.woff2)');
font.load().then(() => {
  document.fonts.add(font);
});

四、高级字体技术

4.1 可变字体（Variable Fonts）

@font-face {
  font-family: 'VariableFont';
  src: url('font.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
}

h1 {
  font-variation-settings: "wght" 650, "wdth" 110;
}

4.2 字体特性控制

p {
  font-feature-settings: "kern" 1, "liga" 1;
  /* 启用连字和字距调整 */
}

五、常见问题解决方案

5.1 跨平台字体一致性

解决方案： 1. 使用Web安全字体 2. 提供多平台字体栈 3. 使用CDN字体服务

5.2 中文字体优化

特殊处理： 1. 简体/繁体适配 2. 按需加载字体包 3. 使用系统默认中文字体

5.3 字体版权问题

合规方案： 1. 使用开源字体（思源系列） 2. 购买商业授权 3. 使用字体服务API

结语

掌握HTML和CSS字体技术需要理解字体渲染原理、熟悉各种属性特性，并能在性能与视觉效果间取得平衡。随着可变字体等新技术的发展，网页排版正迎来更多可能性。建议开发者： 1. 建立标准化字体系统 2. 持续关注新特性 3. 在实际项目中多测试验证

本文共约2700字，涵盖了字体技术的核心知识点和应用方案。具体实施时请根据项目需求选择合适的解决方案。 “`

注：实际字符数可能因格式略有差异，如需精确控制，建议在Markdown编辑器中检查最终输出。