網頁設計中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');    // 兼容舊瀏覽器
   

2. 子集化處理（使用pyftsubset等工具）

   # 中文字體壓縮示例
   pyftsubset font.ttf --text="前端開發SCSS"
   

3. 加載策略強化

   <!-- 預加載關鍵字體 -->
   <link rel="preload" href="font.woff2" as="font" crossorigin>
   

五、常見問題排錯指南

1. 路徑錯誤（編譯后路徑不一致）

   // 解決方案：使用相對根目錄路徑
   $font-path: '/assets/fonts/';
   

2. 字重不匹配

   /* 錯誤：400字重規則應用在600文本 */
   .bold-text {
     font-family: 'CustomFont';
     font-weight: 600; /* 需明確定義600字重的@font-face */
   }
   

3. FOUT/FOUC現象

   /* 添加過渡效果 */
   body {
     font-family: sans-serif;
     transition: font-family 0.3s;
   }
   .font-loaded body {
     font-family: 'CustomFont';
   }
   

4. 瀏覽器兼容方案

   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成為界面設計的核心表達，恰當的字體工程化方案將使你的網站在體驗層面脫穎而出。良好的字體實踐如同精妙的排版藝術：用戶可能說不出哪里好，但處處感受得到品質的存在。