css字体 制作

CSS字体设置方法

通过CSS可以控制网页中文本的字体样式，包括字体类型、大小、粗细、颜色等。以下是常见的CSS字体设置方法：

字体类型设置 使用font-family属性指定文本的字体。可以设置多个字体作为备选，用逗号分隔：

p {
  font-family: "Arial", "Helvetica", sans-serif;
}

字体大小设置 font-size属性控制字体大小，单位可以是px、em、rem等：

h1 {
  font-size: 2em;
}

字体粗细设置 font-weight属性调整字体粗细，常用值有normal、bold或100-900的数值：

strong {
  font-weight: 700;
}

字体样式设置 font-style属性设置斜体等样式：

em {
  font-style: italic;
}

自定义字体使用方法

可以使用@font-face规则引入自定义字体文件：

定义字体

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

使用自定义字体

body {
  font-family: 'MyCustomFont', sans-serif;
}

字体优化技巧

字体加载优化 使用font-display属性控制字体加载期间的显示行为：

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

字体性能优化 考虑使用系统字体堆栈提高加载速度：

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

响应式字体大小 使用视口单位实现响应式字体：

h1 {
  font-size: calc(16px + 1vw);
}

字体排版属性

行高设置 line-height属性控制行间距：

p {
  line-height: 1.6;
}

字母间距 letter-spacing调整字符间距：

h2 {
  letter-spacing: 1px;
}

文本装饰 text-decoration添加下划线等效果：

a {
  text-decoration: none;
}