网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法


Posted in Javascript onNovember 24, 2016

网站发布到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)多用途互联网邮件扩展类型,既设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名,以及一些媒体文件打开方式。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
详解JS函数重载
Dec 04 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 #Javascript
BootStrap树状图显示功能
Nov 24 #Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 #Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 #Javascript
微信小程序-详解数据缓存
Nov 24 #Javascript
如何实现json数据可视化详解
Nov 24 #Javascript
BootStrap 可编辑表Table格
Nov 24 #Javascript
You might like
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
PHP new static 和 new self详解
2017/02/19 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
简单实现js浮动框
2016/12/13 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
详解微信小程序的 request 封装示例
2018/08/21 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
django实现分页的方法
2015/05/26 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
python3 使用traceback定位异常实例
2020/03/09 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
社区国庆节活动方案
2014/02/05 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
小学三年级数学教学反思
2016/02/16 职场文书