使用本地ui-grid.css时ui-grid.woff为何变为类HTML文件？

我之前也碰到过类似的字体加载坑，结合你描述的情况，咱们一步步排查可能的原因和解决办法：

1. 检查字体文件的相对路径是否正确 #

首先打开你本地的ui-grid.css，找到@font-face规则，看看里面的字体引用路径是不是和本地文件结构匹配。比如官方的UI-Grid CSS里的字体路径一般是这样的：

@font-face {
  font-family: 'ui-grid';
  src:url('../fonts/ui-grid.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

如果你的CSS文件放在css/ui-grid/4-11-1/目录下，那字体文件应该放在css/ui-grid/fonts/ui-grid.woff的位置（也就是CSS目录的上一级的fonts文件夹里）。如果路径写错了，服务器会返回404页面，而浏览器把这个404 HTML当成字体文件下载，就会出现你说的问题。

2. 确认服务器是否配置了正确的MIME类型 #

很多服务器默认不会识别.woff字体文件的MIME类型，导致服务器把字体文件当成HTML来解析返回。你需要给服务器添加对应的MIME类型：

• Nginx：在nginx.conf的http块里添加：

  types {
      font/woff woff;
  }
  

• IIS：打开IIS管理器，找到你的站点，进入「MIME类型」，添加新的规则：扩展名.woff，MIME类型application/font-woff
• Apache：在.htaccess里添加：

  AddType font/woff .woff
  

3. 检查本地字体文件是否完整或损坏 #

有时候只下载了CSS文件，却漏掉了字体文件，或者下载的字体文件本身损坏了。建议重新下载完整的Angular UI-Grid 4.11.1包，确保fonts文件夹和css文件夹的层级和官方包一致，再把完整的文件放到本地项目里。

4. 排查前端路由导致的重定向问题 #

如果你的Angular项目用了HTML5模式的路由，服务器可能会把所有静态资源请求都重定向到index.html，包括字体文件请求。这时候需要配置服务器，让它优先返回存在的静态文件，只有当文件不存在时才重定向到首页：

• Apache：在.htaccess里添加：

  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ index.html [L]
  

• Nginx：在站点配置里添加：

  location / {
      try_files $uri $uri/ /index.html;
  }
  

按照这个顺序排查，应该能找到问题所在。

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