css字体制作

使用CSS自定义字体

通过@font-face规则引入自定义字体文件（如.woff、.ttf格式），需定义font-family名称和文件路径。浏览器会自动加载并应用该字体。

@font-face {
  font-family: 'MyCustomFont';
  src: url('path/to/font.woff2') format('woff2'),
       url('path/to/font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: 'MyCustomFont', sans-serif;
}

调整字体属性

通过CSS属性控制字体的视觉表现：

• font-size：设置像素(px)、相对单位(em/rem)或视窗单位(vw)
• font-weight：数值（100-900）或关键词（bold/normal）
• font-style：斜体(italic)或正常(normal)
• line-height：建议使用无单位值（如1.5）

h1 {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

使用可变字体

支持单个文件包含多种字重和宽度变化，通过font-variation-settings调整：

@font-face {
  font-family: 'VariableFont';
  src: url('font.woff2') format('woff2-variations');
  font-weight: 100 900;
}
.text {
  font-variation-settings: 'wght' 400, 'wdth' 80;
}

优化字体渲染

通过以下属性提升显示效果：

• text-rendering: optimizeLegibility 改善小字号可读性
• -webkit-font-smoothing: antialiased（macOS系统）
• font-feature-settings 启用连字等OpenType特性

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

响应式字体设置

使用媒体查询和视窗单位实现自适应：

:root { font-size: 16px; }
@media (min-width: 768px) {
  :root { font-size: calc(16px + 0.25vw); }
}
h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

字体加载策略

防止文字闪烁(FOIT/FOUT)：

@font-face {
  font-display: swap; /* 或fallback/optional */
}

或使用<link rel="preload">提前加载关键字体：

<link rel="preload" href="font.woff2" as="font" crossorigin>