css3的font怎么设置

发布时间：2021-12-14 17:08:39 作者：iii
来源：亿速云阅读：172

# CSS3的font怎么设置

在网页设计中，字体（font）的样式直接影响页面的视觉体验和可读性。CSS3提供了丰富的字体控制属性，本文将详细介绍如何通过CSS3设置字体样式。

## 一、基础字体属性

### 1. font-family 设置字体族

```css
p {
  font-family: "Microsoft YaHei", Arial, sans-serif;
}

可以指定多个字体作为备选（用逗号分隔）
包含空格的字体名称需要用引号包裹
最后通常指定通用字体族（serif/sans-serif/monospace等）

2. font-size 设置字号

h1 {
  font-size: 24px;       /* 像素单位 */
}

h2 {
  font-size: 1.5em;      /* 相对单位 */
}

h3 {
  font-size: 150%;       /* 百分比 */
}

常用单位： - px：绝对像素 - em：相对于父元素 - rem：相对于根元素 - %：百分比 - vw/vh：视窗单位

3. font-weight 设置字重

.bold-text {
  font-weight: bold;    /* 粗体 */
}

.light-text {
  font-weight: 300;     /* 数值100-900 */
}

取值： - normal（400） - bold（700） - lighter/bolder（相对值） - 100-900（数字值）

二、高级字体样式

1. font-style 设置斜体

.italic {
  font-style: italic;   /* 斜体 */
}

.oblique {
  font-style: oblique;  /* 倾斜体 */
}

2. font-variant 设置小型大写字母

.small-caps {
  font-variant: small-caps;
}

3. line-height 设置行高

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

三、CSS3新增字体特性

1. @font-face 自定义字体

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;  /* 控制字体加载行为 */
}

注意事项： - 需要提供多种字体格式（woff2/woff/ttf） - 注意字体授权问题 - 使用font-display优化加载体验

2. font-stretch 调整字体宽度

.wide-text {
  font-stretch: expanded;  /* 扩展 */
}

.narrow-text {
  font-stretch: condensed; /* 压缩 */
}

3. font-kerning 调整字距

.heading {
  font-kerning: normal; /* 启用字距调整 */
}

四、简写属性font

/* 格式：font: style variant weight size/line-height family */
.title {
  font: italic small-caps bold 24px/1.2 "Helvetica Neue", sans-serif;
}

注意： - size和family是必须的 - 省略的属性会使用默认值 - 顺序不能随意更改

五、实际应用示例

响应式字体设置

html {
  font-size: 16px;
}

@media (min-width: 768px) {
  html {
    font-size: 18px;
  }
}

h1 {
  font-size: 2rem;  /* 根据根元素自动调整 */
}

优化中文显示

body {
  font-family: -apple-system, BlinkMacSystemFont, 
               "Segoe UI", "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", sans-serif;
  text-rendering: optimizeLegibility;  /* 优化可读性 */
  -webkit-font-smoothing: antialiased; /* Mac下抗锯齿 */
}

六、常见问题与解决方案

字体不生效：
- 检查字体名称拼写
- 确保字体文件路径正确
- 添加备用字体
自定义字体加载慢：
- 使用woff2格式（压缩率更高）
- 设置font-display: swap
- 预加载字体资源
跨平台显示不一致：
- 指定多个备用字体
- 使用通用字体族兜底
- 测试不同操作系统

七、最佳实践建议

限制字体数量（通常2-3种）
优先使用系统默认字体提升性能
移动端考虑增加字号（至少16px）
高对比度设计保证可读性
使用CSS变量管理字体样式：

:root {
  --main-font: "Helvetica Neue", sans-serif;
  --heading-size: 2rem;
}

h1 {
  font-family: var(--main-font);
  font-size: var(--heading-size);
}

通过合理运用CSS3的字体属性，开发者可以创建出既美观又具有良好可读性的网页排版效果。 “`

（注：实际字数为约1100字，可根据需要扩展具体示例或添加更多细节）