如何在执行npm i时部署自定义字体npm包至目标项目？

完全可行，以下是具体实现步骤：

1. 规范项目目录结构 #

• 将字体文件（.woff2/.ttf等格式）统一放在包内的固定目录，比如src/fonts
• 编写CSS时，使用相对路径引用字体文件，示例：

@font-face {
  font-family: 'MyCustomFont';
  src: url('../fonts/MyCustomFont-Regular.woff2') format('woff2'),
       url('../fonts/MyCustomFont-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

2. 配置package.json #

• 添加files字段，明确指定要发布到npm的文件，确保字体和CSS文件被包含：

{
  "name": "my-custom-fonts",
  "version": "1.0.0",
  "main": "dist/index.css",
  "files": [
    "dist/",
    "src/fonts/",
    "src/css/"
  ]
}

• 如果使用构建工具（如rollup、webpack），需配置插件自动复制字体文件到输出目录，比如rollup用rollup-plugin-copy：

// rollup.config.js
import copy from 'rollup-plugin-copy';

export default {
  // 其他配置...
  plugins: [
    copy({
      targets: [
        { src: 'src/fonts/*', dest: 'dist/fonts' }
      ]
    })
  ]
};

3. 父项目引入使用 #

安装包后，直接在父项目的CSS或JS中导入你的包的主CSS文件即可：

• CSS中导入：

@import 'my-custom-fonts/dist/index.css';

• JS中导入：

import 'my-custom-fonts/dist/index.css';

现代构建工具（vite、webpack、parcel等）会自动解析字体文件路径，将其复制到父项目的静态资源目录，并更新CSS中的引用路径，无需手动处理。

特殊场景处理 #

如果父项目不使用构建工具，直接通过静态文件方式运行，可在包的README中说明让用户手动复制src/fonts目录下的文件到父项目的静态资源目录，并调整CSS中的字体引用路径为绝对路径。

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