首页 > 技术交流 > CSS加载字体的方法_CSS载入系统没有的字体
CSS加载字体的方法_CSS载入系统没有的字体 2011-11-25
 CSS 远程加载字体的方法,做网站CSS的都知道,用户浏览网站时,网页上的字体是加载本地的。换言之,如果网站使用了用户电脑所没有安装的字体,那显示字体就会被默认字体所代替了,自然效果就大受影响了。

上网搜索了下,这个问题,其实还是有解决办法的。那就是,准备一个或几个字体文件,放置到服务器上,再用 CSS 的方法把字体加载到网页中,这样,即使用户电脑中没有某一种字体,也可以正常显示!

以微软雅黑为例,一般来说,VISTA 系统和现在的 win7 系统都自带了这种字体,但 winXP 却没有。如果网站中运用了雅黑字体,win7 系统的用户访问能够正常显示,但 winXP 系统的用户访问,就不能显示,应该是用默认的宋体代替了。

加载字体文件的 CSS 方法,看这段代码

body {font-family:’微软雅黑’}
@font-face {
font-family:微软雅黑;
src: url(‘微软雅黑.eot’); /* IE9 Compat Modes */
src: url(‘微软雅黑.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
  url(‘微软雅黑.woff’) format(‘woff’), /* Modern Browsers */
  url(‘微软雅黑.ttf’)  format(‘truetype’), /* Safari, Android, iOS */
  url(‘微软雅黑.svg#微软雅黑’) format(‘svg’); /* Legacy iOS */
}

系统字体的格式是ttf的,凡是以 IE 为内核的浏览器都不支持加载外部 .ttf 格式的字体!那怎么办啊?

那就改用eot吧,那怎么样把ttf转换成eot呢。这个给大家推荐个网址:http://ttf2eot.sebastiankippe.com/

好了,现在就来测试一下吧。

CSS载入字体实例 

CSS载入字体实例下载 

 

上一篇:apache搭建虚拟主机,实现一个ip,多个域名(独立web) 下一篇:PS图片美化4步处理