CSS加载外部字体的方法和JS加载指定字体的办法

说明：

做网站前端朋友们都知道，用户浏览网站时，网页上的字体是客户电脑上的的。如果说网站使用了用户电脑所没有安装的字体，那预期的效果就没有了，浏览器将会使用电脑默认的字体来显示页面，比如“宋体”。

其实使用用户电脑上没有的字体还是有解决办法的。比如以下两种：

方法1：

准备好字体文件（需要制作几种不同的格式），放置到服务器上，再用 CSS 的方法把字体加载到网页中，这样，即使用户电脑中没有某一种字体，也可以正常显示！（不推荐使用体积过大的字体，比如中文系列）。

各浏览器对WEB字体各种格式的支持情况及字体格式转换可以查看这篇文章。

CSS代码：

@font-face { /* 有多少个字体要写多少个“@font-face {}”块 */
font-family:;
src: url('Coda.eot'); /* IE9 */
src: url('Coda.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('Coda.woff') format('woff'), /* Modern Browsers */
  url('Coda.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('Coda.svg#Coda') format('svg'); /* Legacy iOS */
}

方法2：

使用Google提供的字体库：

WebFontConfig = {
	google: {families: ['Coda|Dancing+Script']}
	// “[]”里是字体名，多个字体用“|”分割，字体名中的空格用“+”代替
	// 不推荐加载中文字体，原因：体积太大，通常都是M级别的
};
(function() {
	var wf = document.createElement('script');
	wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
	wf.type = 'text/javascript';
	wf.async = 'true';
	var s = document.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(wf, s);
})();

这个方法只是封装了第一种方法，不需要转换、上传字体，直接使用Google的服务即可，缺点是Google在国内貌似还不是很稳定。

＜完＞