一、简介

@font-face 是 CSS 中的一个指令，用于定义自定义字体。它允许开发者从外部文件加载字体，并将其应用于网页上的文本。

@font-face {
  font-family: "MyFont"; // 自定义字体系列名称
  src: url("myfont.woff2") format("woff2"), // 字体文件路径及格式
    url("myfont.woff") format("woff"); // 多格式兼容
  font-weight: normal; // 字重（如 400、700）
  font-style: normal; // 字体样式（如 italic）
}

• font-family：定义字体名称，后续通过该名称引用字体。
• src：指定字体文件 URL 和格式（支持 .ttf、.woff、.woff2 等）。
• font-weight / font-style：定义字体的权重和样式，支持差异化加载（如不同粗细的字体文件）。

二、Stylus 中的 @font-face

Stylus 完全兼容 CSS 的 @font-face 语法，同时也完全支持 Style 的语法风格：

 @font-face
   font-family Geo
   font-style normal
   src url(fonts/geo_sans_light/GensansLight.ttf)

 .ingeo
   font-family Geo

编译为：

@font-face {
  font-family: Geo;
  font-style: normal;
  src: url("fonts/geo_sans_light/GensansLight.ttf");
}
.ingeo {
  font-family: Geo;
}

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24