在IIS服务器上部署svg/woff/woff2字体

事情还得起源于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

完成后点应用。

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