当前位置：首页 > CSS

css 制作字体

2026-01-16 09:58:23CSS

自定义字体方法

使用 @font-face 规则引入自定义字体文件（如 .woff, .woff2, .ttf）。需定义字体名称和文件路径：

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

应用自定义字体

通过 font-family 属性将字体应用到元素：

css 制作字体

body {
  font-family: 'MyCustomFont', sans-serif;
}

字体格式优化

优先使用现代格式（如 woff2）提升加载性能。多格式备选确保兼容性：

@font-face {
  font-family: 'OptimizedFont';
  src: url('font.woff2') format('woff2'), /* 优先加载 */
       url('font.ttf') format('truetype'); /* 兼容旧浏览器 */
}

字体显示控制

通过 font-display 调整加载期间的文本渲染策略：

css 制作字体

@font-face {
  font-family: 'DisplayFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* 短暂使用系统字体，自定义字体加载后替换 */
}

动态字体效果

结合 CSS 动画实现动态文字效果：

@keyframes colorChange {
  0% { color: red; }
  50% { color: blue; }
  100% { color: green; }
}

.animated-text {
  animation: colorChange 3s infinite;
}

变量字体应用

使用可变字体（Variable Fonts）调整字重、宽度等属性：

@font-face {
  font-family: 'VariableFont';
  src: url('variable-font.woff2') format('woff2-variations');
  font-weight: 100 900; /* 定义可变范围 */
}

.dynamic-text {
  font-family: 'VariableFont';
  font-weight: 350; /* 在范围内任意取值 */
}