CSS远程加载字体

时间:2023-12-15 18:46:20

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/

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

@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); }