css 制作字体

自定义字体引入

使用 @font-face 规则引入自定义字体文件（如 .woff, .ttf 格式）。需指定字体名称和文件路径：

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

字体应用

通过 font-family 属性将自定义字体应用到元素：

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

字体样式调整

控制字体粗细、斜体等样式：

• font-weight: 设置粗细（如 bold, 700）
• font-style: 设置斜体（如 italic）
• font-size: 调整字号（如 16px, 1.2rem）

h1 {
  font-weight: 700;
  font-style: italic;
  font-size: 2.5rem;
}

字体颜色与装饰

通过以下属性增强视觉效果：

• color: 设置字体颜色（如 #333, rgba(0,0,0,0.8)）
• text-decoration: 添加下划线/删除线（如 underline, line-through）

a {
  color: #0066cc;
  text-decoration: underline;
}

字体间距优化

调整字符和行间距提升可读性：

• letter-spacing: 字符间距（如 1px, 0.1em）
• line-height: 行高（如 1.6, 24px）

p {
  letter-spacing: 0.5px;
  line-height: 1.8;
}

网络字体服务

直接引用 Google Fonts 等服务的字体：

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

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