在 SCSS 中高效使用 @font-face 引入自定义字体

SCSS |

网页设计中 90%的视觉信息由文本承载，而字体选择直接影响用户体验。掌握 @font-face 是前端开发的核心技能之一

一、@font-face 基础概念

@font-face是 CSS 原生的字体引入规则，允许加载服务器托管的字体文件，突破"Web 安全字体"的限制。与传统 CSS 相比，在 SCSS 中使用可借助以下优势：

  • 变量管理：字体路径/名称统一维护
  • 嵌套组织：相关字体规则逻辑分组
  • 混合宏：创建可复用的字体模板

二、核心属性解析

@font-face {
  font-family: "CustomFont"; // 定义引用时的字体名称
  src: local("Custom Font"),
    // 优先使用本地安装字体
    url("fonts/custom.woff2") format("woff2"), url("fonts/custom.woff") format("woff"); // 多格式兼容
  font-weight: 700; // 精确控制字重
  font-style: italic; // 定义斜体变体
  font-display: swap; // FOIT优化方案
}

关键属性说明：

  • src 支持级联加载（顺序很重要！）
  • format() 声明格式提高加载效率
  • font-display 控制 FOIT(不可见文本闪烁)行为

三、SCSS 优化实践策略

方案 1：变量集中管理

// _variables.scss
$font-path: "../assets/fonts/";
$primary-font: "CustomFont";

@mixin font-face($name, $filename, $weight: normal, $style: normal) {
  @font-face {
    font-family: $name;
    src: url("#{$font-path}#{$filename}.woff2") format("woff2"), url("#{$font-path}#{$filename}.woff")
        format("woff");
    font-weight: $weight;
    font-style: $style;
    font-display: swap;
  }
}

// 使用混合宏统一引入
@include font-face($primary-font, "custom-regular", 400);
@include font-face($primary-font, "custom-bold", 700);
@include font-face($primary-font, "custom-italic", 400, italic);

方案 2：字重映射系统

$font-weights: (
  thin: 100,
  light: 300,
  regular: 400,
  medium: 500,
  bold: 700,
  black: 900,
);

@each $name, $weight in $font-weights {
  @include font-face($primary-font, "custom-#{$name}", $weight);
}

方案 3：字体族分组管理

// 建立完整字体族体系
$font-stack: (
  "CustomFont": (
    (
      weight: 300,
      style: normal,
      file: "light",
    ),
    (
      weight: 400,
      style: normal,
      file: "regular",
    ),
    (
      weight: 700,
      style: italic,
      file: "bold-italic",
    ),
  ),
  "SecondFont": (
    ...,
  ),
);

@each $family, $variants in $font-stack {
  @each $v in $variants {
    @include font-face($family, $v[file], $v[weight], $v[style]);
  }
}

四、性能优化关键措施

  1. 字体格式最佳组合
src: url("font.woff2") format("woff2"), // Web开放字体格式2.0
  url("font.woff") format("woff"); // 兼容旧浏览器
  1. 子集化处理（使用 pyftsubset 等工具）
# 中文字体压缩示例
pyftsubset font.ttf --text="前端开发SCSS"
  1. 加载策略强化
<!-- 预加载关键字体 -->
<link rel="preload" href="font.woff2" as="font" crossorigin />

五、常见问题排错指南

  1. 路径错误（编译后路径不一致）
// 解决方案：使用相对根目录路径
$font-path: "/assets/fonts/";
  1. 字重不匹配
/* 错误：400字重规则应用在600文本 */
.bold-text {
  font-family: "CustomFont";
  font-weight: 600; /* 需明确定义600字重的@font-face */
}
  1. FOUT/FOUC 现象
/* 添加过渡效果 */
body {
  font-family: sans-serif;
  transition: font-family 0.3s;
}
.font-loaded body {
  font-family: "CustomFont";
}
  1. 浏览器兼容方案
src: url("font.eot?#iefix") format("embedded-opentype"), /* IE9 */
    url("font.woff2") format("woff2"), url("font.ttf") format("truetype");

六、实战建议

  1. 字库选择：Google Fonts 可查看使用率数据（如 Inter>74%）
  2. 文件托管：考虑 CDN 加速（Fonts.com、Typekit）
  3. 动态加载：
// 使用Web Font Loader 控制
WebFont.load({
  custom: { families: ["CustomFont"] },
});

结语

在 SCSS 中实施@font-face 是高效字体管理的起点。通过构建可复用的字体系统、优化加载策略，结合现代格式如 WOFF2，可显著提升网站性能指标（LCP 降低约 40%）。

当 Typography 成为界面设计的核心表达，恰当的字体工程化方案将使你的网站在体验层面脱颖而出。良好的字体实践如同精妙的排版艺术：用户可能说不出哪里好，但处处感受得到品质的存在。