css字体怎么制作

使用CSS自定义字体

在CSS中，可以通过@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属性将字体应用到元素上：

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

优化字体加载性能

使用font-display属性控制字体加载期间的显示行为，避免布局偏移：

@font-face {
  font-family: 'MyCustomFont';
  src: url('path/to/font.woff2') format('woff2');
  font-display: swap;
}

使用变量字体

变量字体（Variable Fonts）允许通过调整轴参数（如字重、宽度）实现多样式：

@font-face {
  font-family: 'VariableFont';
  src: url('path/to/font.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
}

.text {
  font-family: 'VariableFont';
  font-weight: 650;
  font-stretch: 110%;
}

使用Google Fonts等在线服务

通过链接直接引入托管字体，无需本地文件：

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

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