webfont.woff2和webfont.woff下载超时报404错误

简介: webfont.woff2和webfont.woff下载超时报404错误

开发一个系统用了一个框架显示图标,在刷新时发现浏览器加载网页都要一直加载很久最后报404错误,通过firebug观察网络记录花了差不多30多秒,在此期间网页上的图标都是乱码。

image.png

image.png

image.png

等了一段时间下面图标才显示正常,期望的是立刻显示正常。奇怪的是字体文件加载显示404了怎么图标还能正常显示呢?真是奇怪

image.png

image.png

找了找网上资料说是因为IIS那边要设置允许这个后缀名。现在复制过来一下。

问题: 最近在IIS上部署web项目的时候,发现浏览器总是报找不到woff、woff2字体的错误。导致浏览器加载字体报404错误,白白消耗了100-200毫秒的加载时间。

原因: 因为服务器IIS不认SVG,WOFF/WOFF2 这几个文件类型,只要在IIS上添加MIME 类型即可。

解决方法

1、打开服务器IIS管理器,找到MIME类型。

image.png

2、添加MIME类型 添加三条:  

      文件扩展名      MIME类型 

.svg             image/svg+xml

.woff            application/x-font-woff

.woff2          application/x-font-woff

注:本文在win8环境下IIS7版本中填写的MIME类型,在IIS6、IIS7 MIME类型管理所处位置不一样,但是添加方式和参数均相同。

部分参考:解决Web部署 svg/woff/woff2字体 404错误 - 张瀚文zhw - 博客园

目录
相关文章
|
JavaScript 前端开发 HTML5
PDF转图片,PDF转JPG/PNG,完全由JS实现
原理 使用pdf.js预览图片,pdf.js将pdf通过canvas将每一页渲染出来,然后我们通过canvas的toDataURL方法保存为jpg或png格式。pdf.js是Mozilla开源的一个js库,无需任何本地支持就可以在浏览器上显示pdf文档。
14964 1
|
3月前
|
PHP
在 PHP 中将 WebP 转换为 GIF 图像格式
【8月更文挑战第27天】
70 2
|
6月前
|
人工智能 算法 Java
png,jpg,jpeg,gif,webp这些图片格式解释一下,分别什么时候用?
png,jpg,jpeg,gif,webp这些图片格式解释一下,分别什么时候用?
122 0
|
6月前
gstreamer将RTSP转jpg图片保存
gstreamer将RTSP转jpg图片保存
231 0
解决IIS Web部署 svg/woff/woff2字体找不到问题
最近项目中用到了fontawesome-webfont.svg等字体。部署项目后,发现没有<,+等符号,字体也不对,发现浏览器总是报找不到woff、woff2字体的错误。
304 0
解决IIS Web部署 svg/woff/woff2字体找不到问题
|
PHP
php处理gif,拆帧,倒放神器-gif-endec
php处理gif,拆帧,倒放神器-gif-endec
95 0
php处理gif,拆帧,倒放神器-gif-endec
|
存储 算法 Android开发
聊一聊几种常用web图片格式:gif、jpg、png、webp
在大多数的web页面中,图片占到了页面大小的60%-70%。因此在web开发中,不同的场景使用合适的图片格式对web页面的性能和体验是很重要的。图片格式种类非常多,本文仅针对几种web应用中常用的图片格式:gif、png、jpg、webp进行一个基本的总结。
|
小程序 JavaScript
小程序图片压缩阿里云——?imageMogr2/format/webp
小程序图片压缩阿里云——?imageMogr2/format/webp
|
Linux 数据安全/隐私保护 开发者
TTF、TOF、WOFF 和 WOFF2 的相关概念
在上一篇文章中,我引入了 TTF 格式的字体文件来解决各平台字体表现不统一的问题。
572 0
TTF、TOF、WOFF 和 WOFF2 的相关概念