首页 » 工作 » 正文

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

发布者:站点默认
2013/06/27 浏览数(4,393) 分类:工作 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在国内貌似还不是很稳定。

<完>

点击返回顶部
  1. 留言
  2. 联系方式