当前位置：首页 > CSS

css字体制作

2026-02-12 12:27:06CSS

字体选择与声明

在CSS中通过font-family属性指定字体，支持系统字体和自定义字体。系统字体直接声明名称，自定义字体需通过@font-face规则引入。

/* 系统字体示例 */
body {
  font-family: "Arial", "Helvetica", sans-serif;
}

/* 自定义字体示例 */
@font-face {
  font-family: "MyCustomFont";
  src: url("path/to/font.woff2") format("woff2"),
       url("path/to/font.woff") format("woff");
}

字体大小控制

使用font-size属性调整文字尺寸，支持绝对单位（px、pt）和相对单位（em、rem、%）。

css字体制作

h1 {
  font-size: 2rem; /* 相对根元素大小 */
}
p {
  font-size: 16px; /* 固定像素值 */
}

字体样式与粗细

font-style控制斜体，font-weight调节粗细。数值范围通常100-900，关键字如normal、bold。

em {
  font-style: italic;
}
strong {
  font-weight: 700; /* 等同于bold */
}

字体颜色与装饰

color设置文字颜色，text-decoration添加下划线等效果。支持HEX、RGB、HSL等颜色格式。

css字体制作

a {
  color: #3498db;
  text-decoration: underline;
}
.danger {
  color: hsl(0, 80%, 50%);
}

高级字体特性

通过font-variant和font-feature-settings启用特殊排版效果，如小型大写字母或连字。

.small-caps {
  font-variant: small-caps;
}
.ligatures {
  font-feature-settings: "liga" 1, "dlig" 1;
}

性能优化建议

优先使用WOFF2格式字体，通过unicode-range分割字体文件。设置font-display: swap避免布局偏移。

@font-face {
  font-family: "OptimizedFont";
  src: url("font.woff2") format("woff2");
  unicode-range: U+000-5FF; /* 仅加载拉丁字符集 */
  font-display: swap;
}