css制作字体

字体属性设置

在CSS中，可以通过font-family属性指定字体类型。例如设置段落文本为微软雅黑：

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

建议始终提供备用字体栈，用逗号分隔多个字体名称。浏览器会优先使用第一个可用字体。

字体大小控制

使用font-size属性调整文字尺寸，支持多种单位：

h1 {
  font-size: 24px;    /* 像素单位 */
}
.subtitle {
  font-size: 1.2rem;  /* 相对根元素单位 */
}

常用单位包括px（固定像素）、em（相对父元素）、rem（相对根元素）和%（百分比）。

字体样式调整

font-style控制斜体显示：

.emphasis {
  font-style: italic;
}

font-weight设置粗细程度：

.bold-text {
  font-weight: 700;  /* 或使用bold关键字 */
}

自定义字体引入

通过@font-face规则加载外部字体：

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

支持WOFF2、WOFF、TTF等现代字体格式，建议优先使用WOFF2以获得最佳性能。

文本装饰效果

text-decoration属性添加下划线等装饰：

.link {
  text-decoration: underline;
}
.highlight {
  text-decoration: underline wavy red;
}

可组合线条类型（solid/dotted/wavy）、颜色和样式（underline/overline/line-through）。

字母间距与行高

letter-spacing调整字符间距：

.title {
  letter-spacing: 2px;
}

line-height控制行间距：

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

文字阴影效果

text-shadow创建投影效果：

.headline {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

参数依次为：水平偏移、垂直偏移、模糊半径、颜色。多个阴影用逗号分隔。

响应式字体处理

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

.responsive-text {
  font-size: calc(16px + 0.5vw);
}

结合CSS变量可创建更灵活的排版系统：

:root {
  --base-size: 16px;
}
article {
  font-size: var(--base-size);
}

字体特性设置

font-variant控制特殊字符显示：

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

OpenType特性可通过font-feature-settings启用：

.advanced {
  font-feature-settings: "liga" 1, "kern" 1;
}