字体css制作

字体 CSS 制作指南

通过 CSS 可以灵活控制网页字体的样式、大小、颜色等属性。以下是常见的字体 CSS 属性和使用方法。

字体家族（font-family）

使用 font-family 指定字体，可以设置多个备用字体以确保兼容性：

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

优先使用 "Helvetica Neue"，若不可用则尝试 Arial，最后使用系统默认无衬线字体。

字体大小（font-size）

font-size 控制文字尺寸，支持像素（px）、相对单位（em、rem）或百分比：

h1 {
  font-size: 2rem; /* 相对于根元素 */
}
p {
  font-size: 16px;
}

字体粗细（font-weight）

通过 font-weight 设置文字粗细，常用值包括 normal（400）、bold（700）或数值（100-900）：

strong {
  font-weight: 600;
}

字体样式（font-style）

font-style 控制斜体效果：

em {
  font-style: italic;
}

行高（line-height）

line-height 调整行间距，建议使用无单位数值（如 1.5）基于当前字体大小缩放：

article {
  line-height: 1.6;
}

字体颜色（color）

通过 color 设置文字颜色，支持十六进制、RGB 或颜色名称：

a {
  color: #3498db;
}

自定义字体（@font-face）

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

@font-face {
  font-family: 'CustomFont';
  src: url('path/to/font.woff2') format('woff2');
}
header {
  font-family: 'CustomFont';
}

字体简写属性

font 简写属性可合并多个设置（顺序：style weight size/line-height family）：

button {
  font: italic 500 1.2em/1.5 "Segoe UI", sans-serif;
}

注意事项

• 优先使用系统默认字体以提高加载速度
• 中文字体文件较大，建议仅对必要内容使用 @font-face
• 确保字体颜色与背景有足够对比度（WCAG 标准建议至少 4.5:1）