如何重定义CSS的@font-face属性？替换TTF为WOFF字体无效

问题背景 #

当前项目通过import 'outside-library/styles/main.css';引入外部库样式，其中main.css包含以下字体定义：

@font-face {
    font-family: 'Noto Sans';
    font-weight: 800;
    src: url('../assets/NotoSans-ExtraBold.ttf');
} 

为减小字体体积，新建CSS文件重定义该字体为WOFF格式：

@font-face {
    font-family: 'Noto Sans';
    font-weight: 800;
    src: url('../assets/NotoSans-ExtraBold.woff');
}

但无论新文件引入在main.css之前还是之后，浏览器仍加载原TTF字体。

可行解决方案 #

1. 新增属性提升规则优先级 #

浏览器会优先选择属性更完整的@font-face规则，在自定义规则中添加额外属性（如font-display），让浏览器优先识别你的定义：

@font-face {
    font-family: 'Noto Sans';
    font-weight: 800;
    src: url('../assets/NotoSans-ExtraBold.woff');
    font-display: swap; /* 新增属性提升规则优先级 */
}

2. 构建工具层面重定向资源路径 #

如果使用Webpack、Vite等构建工具，可通过路径别名将原TTF文件的请求指向WOFF文件。以Vite为例，在vite.config.js中配置：

export default {
  resolve: {
    alias: {
      'outside-library/assets/NotoSans-ExtraBold.ttf': '/src/assets/NotoSans-ExtraBold.woff'
    }
  }
}

3. 利用CSS @layer分层控制优先级 #

通过@layer将自定义样式放在更高优先级的层中，覆盖外部库的未分层样式：

@layer custom;

@layer custom {
    @font-face {
        font-family: 'Noto Sans';
        font-weight: 800;
        src: url('../assets/NotoSans-ExtraBold.woff');
    }
}

应急场景下也可使用!important强制覆盖（不推荐长期使用）：

@font-face {
    font-family: 'Noto Sans' !important;
    font-weight: 800 !important;
    src: url('../assets/NotoSans-ExtraBold.woff') !important;
}

4. 直接修改外部库样式（维护性差，谨慎使用） #

如果外部库是本地依赖，可直接找到outside-library/styles/main.css，将其中的TTF路径替换为WOFF路径。注意：后续库版本更新会丢失该修改。

内容的提问来源于stack exchange，提问作者Александр Кос