CSS加载外部字体的方法_CSS载入本地没有的字体
时间: 2013-12-24   点击: 8896

平时我们做网站CSS的都知道,用户浏览网站时,网页上的字体是加载本地电脑里的。如果网站使用了用户电脑所没有安装的字体,那显示字体就会被系统默认的字体所代替了,自然显示效果也就大不如前了,这个问题如何解决呢,成都网站建设通过多方面了解。

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

以微软雅黑为例,一般来说,现在的 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 格式的字体!那怎么办啊?

把ttf转换成eot网址:http://ttf2eot.sebastiankippe.com/

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

 

 

 

@font-face

语法:
 
@font-face { font-family : name ; src : url( url ) ; sRules }
 
说明:
 
name :  字体名称
url :  使用绝对或相对地址指定OpenType字体
sRules :  样式表定义
 
设置嵌入HTML文档的字体。
嵌入HTML文档的字体是指将OpenType字体(压缩的TrueType字体)文件映射到客户端系统,用来提供HTML文档使用该字体,或取代客户端系统已有的同名字体。
 
示例:
 
@font-face { font-family: dreamy; font-weight: bold; src: url(http://www.example.com/font.eot); }

现在,虽然是成功解决了各主流浏览器加载外部字体的问题,但也只是成功了一小半,因为我们要清楚地看到问题的本质,即后续需要测试网站加载速度的问题,两个字体文件加起来快有 30M 了,加载速度的问题亟待测试与解决!

地址:成都锦江区成仁路口万达广场11B单元28楼2848号 咨询热线:028-85241801
   四川岂恺信息技术有限公司是从事成都网站建设,成都网页设计,成都网站制作,成都网站推广等业务的专业网络公司!

版权所有 Copyright ◎7kai.net Inc. All rights reserved. 蜀ICP备10000515号-5