css字体制作

使用CSS自定义字体

通过@font-face规则引入自定义字体文件（如TTF、OTF、WOFF等格式），示例代码如下：

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

系统字体栈设置

使用通用字体族确保跨平台兼容性，建议按以下优先级回退：

body {
  font-family: -apple-system, BlinkMacSystemFont, 
               "Segoe UI", Roboto, Helvetica, 
               Arial, sans-serif;
}

可变字体控制

通过font-variation-settings调整可变字体属性：

.variable-font {
  font-family: 'InterVariable';
  font-variation-settings: 'wght' 400, 'slnt' 0;
  /* 动态调整示例 */
  &:hover {
    font-variation-settings: 'wght' 700, 'slnt' -10;
  }
}

字体特性设置

启用OpenType特性如连字、数字样式等：

.advanced-features {
  font-feature-settings: 'liga' 1, 'tnum' 1;
  font-variant-numeric: tabular-nums;
  font-kerning: normal;
}

性能优化方案

采用现代字体格式和加载策略：

@font-face {
  font-family: 'OptimizedFont';
  src: url('font.woff2') format('woff2') tech('variations'),
       url('font.woff2') format('woff2-variations');
  font-display: swap;
  unicode-range: U+000-5FF; /* 限定字符集 */
}

动态字体加载

使用CSS与JavaScript配合实现按需加载：

document.fonts.ready.then(() => {
  document.body.classList.add('fonts-loaded');
});

配套CSS：

body {
  font-family: fallback-font;
}
body.fonts-loaded {
  font-family: main-font;
}