关于出现在服务器中配置的web，用浏览器打开出现关闭按钮消失或者字体马赛克乱码的问题

在服务器中配置的web，用浏览器打开出现关闭按钮消失或者字体马赛克乱码的问题，用谷歌chrome（F12）调试或者用火狐firebug会出现如下报错：

1、NetworkError:404 Not Found-http://10.***.*.**/css/ui-grid.woff

2、css3114:@font-face 未能完成opentype嵌入权限检查。权限必须是可安装的。文件：fontawesome-webfont.ttf

其实两个问题是关联的，如果两个问题不同时解决，都会出现上述问题；在我的项目中，代码本身是已经解决了第二个问题的，但是用IE还是会报第二个问题的错误（配置在服务其中的web打开才会有错，用开发软件打开原始的代码不会报错），由此问题出现在IIS上。

先解决第二个问题(参考：http://blog.csdn.net/shore_w/article/details/8976188）

@font-face 是css3中的一个模块，他主要是把自己定义的Web字体嵌入到网页中，让网页上使用的字体可以不受客户端字体库的限制。（想学习的同学可以去这里 ( http://www.w3cplus.com/content/css3-font-face ) , 讲的非常不错, 下面我们来说问题使用@font-face的页面在本地测试, 各浏览器字体显示正常, 上传至服务器端后访问, IE9不能正常显示WEB字体, Chrome和Firefox字体显示均正常.）

在IE控制台中会提示

之前的代码：

1. @font-face  
2. {  
3.     font-family:'ui-grid';  
4.     src:url('ui-grid.eot');  
5.    
6.         url('ui-grid.woff') format('woff'),  
7.         url('ui-grid.ttf?') format('truetype'),  
8.         url('ui-grid.svg#ui-grid') format('svg');  
9.  
   
10. }  

解决问题的代码就是在第5行增加：url('ui-grid.eot#iefix') format('embedded-opentype'),  

即代码为：

1. @font-face  
2. {  
3.     font-family:'ui-grid';  
4.     src:url('ui-grid.eot');  
5.         url('ui-grid.eot#iefix') format('embedded-opentype'), 
6.         url('ui-grid.woff') format('woff'),  
7.         url('ui-grid.ttf?') format('truetype'),  
8.         url('ui-grid.svg#ui-grid') format('svg');  
9.  
   
10. }  

然后解决第一个问题：NetworkError: 404 Not Found - http://xxxxxxxx/xx-font.woff 解决方法

在运行中直接输入IIS(关于配置IIS，百度)，

选中IIS里的 MIME Types --> Add... --> File name extension:.woff   MIME type:font/opentype

按照图中顺序一步一步配置，即可！