标题起的比较诡异，部署网站的字体和服务器IIS有什么关系？如果你的职责只限于一名前端开发，那么你可能很“幸福”地与这些问题擦肩而过，浑然不觉。可是本人一直都是孤军奋战，连开发环境都要自己搭建，这次又踩了新的坑，发现网站所用的woff、svg等字体压根就没被页面加载。反复排摸都不得其解，用浏览器访问服务器上的这些字体url，全都报404错误，只有ttf的字体能被访问到…

事情还得起源于Google被墙这事，在几个月前我改用了360提供的字体库，一直也运行稳定。今天发现360的字体库失效了，网站字体又变回系统字体，而且一直在尝试加载360的字体库，页面变得很慢，和当初加载不到Google字库的时候一个德性…看来没有永远靠得住的服务啊，要想用字体，还得靠自己…

于是我把网站要用的“Open Sans”字体给下载下来（找字体百度一大堆下载地址），下载下来的字体是ttf格式。到 fontsquirrel 这个网站把字体转换一下，下载它自动生成的压缩包，解压得到这些字体文件：

然后一股脑都上传到服务器上，注意刚刚解压的文件里面已经生成了加载字体的CSS代码，在文件stylesheet.css里，直接拷贝过来把font-family改成我要的“Open Sans”，放到自己网站加载的样式表中即可：

1
2
3
4
5
6
7
8
9
10
11

@font-face {
	font-family: 'Open Sans';
	src: url('font/opensans-webfont.eot');
	src: url('font/opensans-webfont.eot?#iefix') format('embedded-opentype'),
		url('font/opensans-webfont.woff2') format('woff2'),
		url('font/opensans-webfont.woff') format('woff'),
		url('font/opensans-webfont.ttf') format('truetype'),
		url('font/opensans-webfont.svg#open_sansregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

本以为大功告成了，刷新网站，字体还是不对。检查发现在url没错的前提下，字体文件都报404错误。

于是再百度谷歌一堆方案，发现原来是IIS不认SVG，WOFF/WOFF2这几个文件类型，得给她们加MIME类才行：
远程登录主机，打开IIS，找到网站，右键属性，打开“HTTP头”，找到右下角的“MIME类型…”

新建如下3条：
.svg image/svg+xml
.woff application/x-font-woff
.woff2 application/x-font-woff

完成后点应用。

回到浏览器再刷新页面，字体终于完美加载了。

注：本文所描述的运行环境是IIS6。在IIS7或更高版本中，“MIME类型”所在的位置会有所不同，但添加的参数一致。IIS7中如何配置可以参考我的另一篇博客：在Windows Azure/IIS7环境下部署svg/woff/woff2字体，添加MIME类型

本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/682.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。

本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。
您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。