解决网站出现GET .woff 404 (Not Found)的问题

本文介绍了解决IIS服务器上woff字体文件出现404错误的方法,包括在Web.config文件中配置woff字体的MIME类型以及直接在IIS中添加woff字体的MIME类型。

网站发布到IIS后,发现网站使用的Bootstrap框架所引用的woff字体无法正常显示。于是跟踪http请求,发现woff字体请求出现GET .woff 404 (Not Found)的问题,但是项目中woff字体的文件并未丢失。后经排查,原来是服务器上IIS没有添加woff字体的MIME类型,导致发送HTTP请求时,IIS无法处理和识别此类型的文件。

解决方法1:在Web.config配置文件中添加woff字体的MIME类型
解放方法2:在IIS中添加woff字体的MIME类型
woff字体简介
MIME类型简介
解决方法一:在Web.config配置文件中添加woff字体的MIME类型

如果网站是使用ASP.NET 或者ASP.NET MVC 编写的,可以很方便的直接使用配置文件进行woff字体的配置。只要在Web.config中的system.webServer节点添加下面的配置可以了。


  <system.webServer>    
    <staticContent>
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="font/x-font-woff" />      
    </staticContent>
  </system.webServer>

这里要注意下的是这个配置,添加此节点是防止出现这个错误:“在唯一密钥属性“fileExtension”设置为“.woff”时,无法添加类型为“mimeMap”的重复集合项”,这个问题可以点击此链接查看解决方法。如果只添加下面的 这个节点,而且没有报这个错误的话,remove节点可以不用添加。另外”font/x-font-woff”是woff字体的MIME类型值。

将该节点添加到网站的配置文件后,在重新打开网站即可正常显示woff字体。此方法可用于没有权限操作IIS管理器的时候作为解决方案。

解放方案二:在IIS中添加woff字体的MIME类型

如果可以直接操作IIS管理器的话,也可以直接在IIS上添加woff字体的mime type。只要打开当前的IIS,打开MIME类型的配置,最后添加一个新的MIME类型就可以了,这里woff字体的扩展名是.woff, MIME类型为:”font/x-font-woff“。具体操作如下图所示:

打开控制面板中的IIS管理器,选择当前IIS,打开MIME类型配置

在IIS中添加.woff截图

点击MIME类型右边操作的栏的添加功能

添加.woff的MIME类型截图

弹出的添加MIME类型对话框中,文件扩展名填写.woff,MIME类型可填写 font/x-font-woff 或者application/x-font-woff

设置文件扩展名和类型

点击确定后成功添加了.woff扩展名的MIMI TYPE,现在打开网站请求WOFF字体就不会出现404 NOT FOUND错误了。

woff字体简介

Web开放字体格式(Web Open Font Format,简称WOFF) 是一种网页所采用的字体格式标准。此字体格式发展于2009年,现在正由万维网联盟的Web字体工作小组标准化,以求成为推荐标准。此字体格式不但能够有效利用压缩来减少档案大小,并且不包含加密也不受DRM(数位著作权管理)限制。

在2010年4月8日,Mozilla基金会、Opera软件公司和微软提交WOFF之后,万维网联盟发表评论指,希望WOFF不久能成为所有浏览器都支持的、“单一、可互操作的(字体)格式”。[6]2010年7月27日,万维网联盟将WOFF作为工作草案发布。

WOFF的MIME类型是:application/x-font-woff(font/x-font-woff也可以),目前的IIS7里面默认没有这个MIME类型,如果要让网站支持这个,请在IIS7里面的MIME类型里面添加woff。

MIME类型简介

MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型,既设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名,以及一些媒体文件打开方式。

### 解决 IconFont .woff 文件 404 错误的方法 当遇到 `.woff` 字体文件返回 `404 Not Found` 的错误时,通常是因为 Webpack 配置未正确处理字体资源或者服务器端未能找到该文件。以下是可能的原因分析以及解决方案: #### 可能原因一:Webpack 配置缺失或不正确 如果项目使用了 Webpack 构建工具,则可能是 Webpack 中缺少加载器来解析 `.woff` 或其他字体类型的文件。可以通过安装并配置合适的 loader 来解决问题。 ```javascript // 安装必要的依赖包 npm install --save-dev file-loader url-loader ``` 在 Webpack 配置文件中添加如下规则以支持 `.woff` 和其他字体类型文件的加载: ```javascript module.exports = { module: { rules: [ { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource', generator: { filename: 'fonts/[name][ext]' } }, ], }, }; ``` 此部分代码定义了一个正则表达式匹配所有的字体文件扩展名,并通过 `type: 'asset/resource'` 将其作为静态资源复制到构建目录中的指定路径下[^1]。 #### 可能原因二:CORS 跨域资源共享问题 有时即使文件存在于服务器上仍会报错,这可能是由于跨域请求被阻止所致。确保托管这些字体文件的服务允许来自前端应用所在域名的访问权限。 对于 Nginx 用户来说可以在站点配置文件里加入以下指令开启 CORS 支持: ```nginx add_header Access-Control-Allow-Origin "*"; add_header Access-Control-Allow-Methods "GET, POST, OPTIONS"; add_header Access-Control-Allow-Headers "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type"; ``` #### 可能原因三:Hexo 主题设置不当 如果你正在使用 Hexo 博客框架并且遇到了类似的图标显示异常情况,请确认所选主题确实包含了所需的 iconfont 库及其对应的 CSS 样式表链接地址是否有效。另外还需要注意的是某些情况下需要手动更新 `_config.yml` 文件内的 theme 属性值以便切换至新下载好的模板后再执行清理缓存命令重新生成页面内容才能使更改生效[^2]。 最后提醒一下开发者们记得检查网络面板查看实际发出请求的目标位置是否存在拼写失误等问题也可能造成此类现象发生哦!
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值