网站发布后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的版本实现执行不同的代码
May 11 Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
Redux实现组合计数器的示例代码
Jul 04 Javascript
React 组件中的 bind(this)示例代码
Sep 16 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 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入门速成(2)
2006/10/09 PHP
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
php 常用类汇总 推荐收藏
2010/05/13 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
VBScript版代码高亮
2006/06/26 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
护士的自我鉴定
2014/02/07 职场文书
公证书样本
2014/04/10 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
工作保证书
2015/01/17 职场文书
结婚通知短信怎么写
2015/04/17 职场文书