Angular+ExpressJS部署自定义字体时出现OTS解析错误

问题描述 #

Angular项目本地通过ng serve运行时，自定义字体显示正常；执行ng build构建后将dist文件夹部署到ExpressJS服务器，字体无法加载，报错信息如下：

Failed to decode downloaded font: http://localhost:5000/media/Branda-yolq-PC7QOVZG.ttf
OTS parsing error: invalid sfntVersion: 1008821359

字体引入的@font-face配置：

@font-face {
  font-family: 'Branda';
  src: url('../public/fonts/Branda-yolq.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

核心原因 #

服务器返回的字体文件实际是index.html内容（路由匹配规则未包含字体后缀，导致字体请求被错误转发到SPA的 fallback 路由），浏览器将HTML文件当作字体解析，触发解码错误。

解决方案 #

1. 修正静态资源匹配的正则规则 #

在Express的app.js中，将字体文件后缀（.ttf、.woff、.woff2、.otf等）加入静态资源匹配的正则表达式，确保字体请求能正确命中静态文件：

// 替换原正则规则
var pattern = new RegExp('(.css|.html|.js|.ico|.jpg|.jpeg|.png|.ttf|.woff|.woff2|.otf)+$', 'gi');

2. 改用Express原生静态资源托管（推荐） #

放弃手动正则判断，使用express.static直接托管dist目录，自动处理所有静态资源请求，仅将非静态资源请求 fallback 到index.html：

// 移除原app.get('*', ...)代码，替换为以下内容（放在API路由之前）
app.use(express.static(path.join(__dirname, 'dist/istivirag/browser')));

// SPA路由 fallback
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/istivirag/browser/index.html'));
});

3. 规范Angular项目中字体文件的存放路径 #

将字体文件移至Angular推荐的静态资源目录src/assets/fonts下，修改@font-face的路径配置：

@font-face {
  font-family: 'Branda';
  src: url('./assets/fonts/Branda-yolq.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

这样ng build时会自动将字体文件打包到dist的assets目录，避免路径错乱。

4. 清理缓存后重新构建部署 #

执行以下步骤确保资源更新：

• 删除旧的dist目录
• 执行构建命令：ng build（或ng build --configuration production）
• 将新生成的dist目录重新部署到服务器

内容的提问来源于stack exchange，提问作者István Dobai