关于CSS中@font-face 嵌入字体的用法 客户端没有字体 自动下载字体

分类:Html_Css| 发布:camnprbubuol| 查看: | 发表时间:2011/6/21

font-family:的意思就是说,优先选择在前面的字体,比如微软雅黑,如果浏览者的电脑上没有安装这个字体,那么就采用Arial字体,以此类推,如果都没有,就使用最后一个sans-serif;也就是无衬线字体,这不是字体名,而是一类字体的称呼,雅黑近似地也属于sans-serif; 具体的你可以去找一下关于字体分类的知识。

网页安全字体,也就是绝大多数系统中都有的字体大概有9种,没有的话就只能用近似的代替,还有一种@font-face,是CSS标记,可以下载服务器端字体,但问题比较多,有的浏览器不支持,而且下载速度很慢。另外还有用Flash实现的。

 

CSS手册中的介绍如下

@font-face版本:CSS2  兼容性:IE4+

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


我想问的是这个eot文件怎么来的   具体怎么操作

这个标签和font-family有冲突没

我已经在CSS的BODY标签里定义
font-family:"microsoft yahei",verdana,arial;

我想嵌入microsoft yahei 让没字体的用户也能看到效果


关于@font-face的介绍(来自w3c)
http://www.w3.org/TR/CSS2/fonts.html#font-descriptions

网页中的eot字体文件
http://hi.baidu.com/zhy65991/blog/item/5d1e157a683c18f20ad187a3.html

用@font-face来加载服务器上的字体后,是需要用font-family来作用到指定的类、ID、标签上才可以的。
比如对h1定义test这个字体,那么要用font-family来声明使用这个test才可以。

@font-face用的不是太多,一个中文字体集的字体都有好几M,不像英文字体那样比较小,所以如果需要做特殊的艺术字或者要的效果还是做成图片来的简单、高效。

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/html-css/357.html