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;
}
