css字体制作

CSS字体设置基础

在CSS中设置字体主要通过font-family属性实现，可以指定多个字体作为备选。系统会优先使用第一个可用字体。

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

自定义字体引入

使用@font-face规则引入自定义字体文件，支持多种格式（WOFF/WOFF2/TTF等）。

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

字体样式控制

通过组合多个属性实现精细控制：

• font-size: 设置字号（px/em/rem）
• font-weight: 控制粗细（100-900或normal/bold）
• font-style: 斜体控制（italic/normal）
• line-height: 行间距

h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
}

响应式字体方案

使用视口单位实现自适应字体大小：

.title {
  font-size: calc(16px + 1vw);
}

或通过媒体查询分段控制：

@media (min-width: 1200px) {
  body { font-size: 18px; }
}

字体优化技巧

• 预加载关键字体：<link rel="preload" href="font.woff2" as="font">
• 使用font-display: swap避免布局偏移
• 限制字符集减小文件体积：unicode-range: U+000-5FF;
• 现代浏览器优先使用WOFF2格式