如何在CSS中从node_modules加载字体？

方案1：基于webpack构建项目的处理方式 #

如果你的项目使用webpack作为构建工具，按以下步骤配置：

1. 安装字体加载依赖：

npm install file-loader --save-dev

2. 在webpack.config.js中添加字体文件的加载规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

3. 在CSS中正确引用字体：

@font-face {
  font-family: 'OwnLight';
  src: url('~font-database/fonts/Own-Light-Regular.ttf') format('truetype');
}

方案2：非webpack环境的处理方式 #

若项目未使用构建工具，通过相对路径直接指向node_modules中的字体文件：

@font-face {
  font-family: 'OwnLight';
  src: url('../node_modules/font-database/fonts/Own-Light-Regular.ttf') format('truetype');
  /* 注意：根据你的CSS文件所在位置调整相对路径层级 */
}

关键注意事项 #

• 文件名拼写检查：你之前的代码中存在两处错误：字体文件名是Own-Light-Regular.ttf（不是Regulat），后缀是ttf（不是tff），这是导致加载失败的核心原因之一。
• 确认font-database已正确安装在node_modules目录下，且字体文件的路径完全匹配。
• 框架项目（如Vue/React）需确认静态资源配置允许引用node_modules内的文件。

内容的提问来源于stack exchange，提问作者kzaiwo