当前位置：首页 > CSS

制作css字体

2026-01-28 10:47:05CSS

使用系统字体

在CSS中直接调用系统已安装的字体，通过font-family属性指定字体名称。这种方法无需额外资源加载，性能最优。

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

引入网络字体

通过@font-face规则加载在线字体文件（如WOFF/WOFF2格式）。需提供字体文件的URL和格式声明。

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

使用Google Fonts

通过链接Google Fonts提供的CSS文件，自动托管字体资源。在HTML头部添加：

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

然后在CSS中引用：

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

自定义字体变体

通过CSS属性控制字体的粗细、斜体等变体：

h1 {
  font-weight: 700; /* 粗体 */
  font-style: italic; /* 斜体 */
  font-stretch: condensed; /* 压缩字形 */
}

优化字体渲染

使用font-smoothing属性改善字体在非Retina屏幕上的显示效果：

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

可变字体支持

现代浏览器支持可变字体，通过font-variation-settings调整动态参数：

制作css字体

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

.text {
  font-variation-settings: "wght" 400, "wdth" 100;
}