Angular 5项目中如何导入类安装程序的OTF新字体？

嘿，我来帮你搞定这个字体导入的问题！你遇到的核心卡点是那个类似.exe的OTF安装程序——这其实是Windows的字体安装包，得先把真正的.otf字体文件提取出来，再按正确步骤配置到Angular项目里。下面是一步步的操作指南：

第一步：提取真实的OTF字体文件 #

那个.exe本质是个封装了字体的安装程序，你有两种方式拿到原始字体文件：

• 用解压工具提取：右键点击.exe文件，用7-Zip、WinRAR这类工具选择「打开压缩包」，里面就能找到后缀为.otf的字体文件，直接复制出来就行。
• 安装后提取：双击.exe完成字体安装，然后打开Windows的字体文件夹（路径是C:\Windows\Fonts），找到对应的字体，右键选择「显示文件位置」，就能复制出原始的.otf文件了。

第二步：在Angular 5项目中配置字体 #

1. 放置字体文件 #

把提取到的.otf文件复制到项目的src/assets/fonts/目录下（如果fonts文件夹不存在，直接新建一个就行）。

2. 在全局样式中引入字体 #

打开项目根目录下的src/styles.css（如果你用的是SCSS，就打开styles.scss），添加@font-face规则来注册字体：

@font-face {
  font-family: 'CustomFont'; /* 给你的字体起个自定义名字，后面要用 */
  src: url('../assets/fonts/your-font-file-name.otf') format('opentype');
  font-weight: normal; /* 根据字体实际属性调整，比如bold、light */
  font-style: normal;
}

⚠️ 注意路径要和你放置的字体文件位置对应，别写错层级！

3. 配置.angular-cli.json #

因为是Angular 5，我们需要修改根目录下的.angular-cli.json文件：

• 找到styles数组，确保你的全局样式文件（比如styles.css）已经在里面，这样Angular会编译包含字体规则的样式：

  "styles": [
    "styles.css"
  ]
  

• 另外，为了确保字体文件被正确打包到项目中，你可以在assets数组里明确添加fonts目录：

  "assets": [
    "assets",
    "assets/fonts"
  ]
  

第三步：在项目中使用字体 #

现在你可以在任何组件的样式或者全局样式里调用这个字体了，比如：

.title {
  font-family: 'CustomFont', sans-serif; /* 这里的名字要和@font-face里的font-family一致 */
}

小提示 #

• 修改配置后，记得重启Angular开发服务器（停止ng serve后重新启动），不然配置可能不会生效。
• 如果遇到路径问题，可以试试用绝对路径写法，比如url('/assets/fonts/your-font-file.otf')。

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