CSS:@font-face定义使用网络字体

[ 作者:笑傲江湖 发布于:2011年-7月-3日 2:32 星期日  分类:百 宝 箱 ]

  折腾网页的人,基本上都会遇到一个头疼的问题,那就是中文字体,你要是想个漂亮的中文字体显示汉字,那你得把文字弄成图片,然后放到网页上去。没办法啊,中文字体太大,你自己电脑上有这种字体,只有你本机浏览网页时可以正确显示这个字体,否则别人看到的就是浏览器用默认字体代替了,默认字体那最普遍的就是宋体了。这几年还好,Vista和Win7系统自带的微软雅黑字体也算不错,算是可以在网页上使用的中文字体了。当然,如果你还是用Vista之前的操作系统,如果未单独安装微软雅黑字体,也一样无法看到,还是照旧宋体显示。所以汉字折腾成图片这事,估计咱国的搞网页制作的,没有一个不头疼的,具体头疼什么?业内人士的话,哥不说,你懂的。
  中文字体不行,那英文相对就好办多了,操作系统里本身带了很多的不错的英文字体,都可以在网页上使用。但是如果你自己发现了系统之外的,觉得很不错的英文字体要用在网页上,咋办呢?那就搞成网络字体,随制作好的网页一并传到你的网站上去,这样,浏览网页的时候,就自动把这字体下载了,同时也能正确的按照你指定的字体,显示页面上的英文文字。好了,下面就说说怎么整:

  首先你的把你要用的英文字体找回来,TTF[TureType Font]和OTF[OpenType Font]的都行,然后得转换一下格式,搞成eot的,这是给IE浏览器用的,TTF的直接非IE浏览器就能用,比如Chrome、Firefox、Opera、Safari(PC)。

在线转换:
http://www.fontsquirrel.com/fontface/generator

TTF2EOT的命令行:
http://code.google.com/p/ttf2eot/downloads/list

  俺就用第一个了,在线转换,不是方便吗,转换完成之后,会下载回来一个Zip的压缩包,解开之后,连字体带CSS样式文件都一并整好了,这服务没得说了,你需要做的就是把字体文件传到你的网站上去,然后在你网站的主样式表文件里添加好对应的网络字体定义,然后就可以随心所欲的使用了,CSS里网络字体定义方式如下:

@font-face {
    font-family: 'Museo700';
    src: url('museo700-regular-webfont.eot');
    src: url('museo700-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('museo700-regular-webfont.woff') format('woff'),
         url('museo700-regular-webfont.ttf') format('truetype'),
         url('museo700-regular-webfont.svg#Museo700') format('svg');
    font-weight: normal;
    font-style: normal;

}

  font-family:是定义字体名称的,这个依据你的喜好随便七个好名字就行,不要和其他默认字体名冲突,src后面定义的是字体的路劲,是使用相对地址还是绝对地址你自己看着办。font-weight是粗细,font-style是斜体下划线什么的默认即可。
  这个定义好了之后,其他的类或者ID的定义里,定义字体用的font-family后面就可以加上你刚才定义的这个属于你的网络字体了,如下:

.mywebfont {font-family:'Museo700','微软雅黑','宋体',Arial,Helvetica,sans-serif;}

关于TTF字体转EOT格式

  其实汉字这样搞意义不大,汉字的字库文件太大了,就目前咱们杯具的网速来说,弄成网络字体不现实,即使是Google提供的网络字体API服务,都还不支持中文,另外一个问题就是字体版权的问题,英文字体,字库文件本身就小,人家就26个字母,加上标点符号,特殊字符什么的,也才几十K,最大也不过百多K,而且免费的漂亮的字体很多,所以作为网络字体使用就方便多了。汉字字库,免费漂亮的几乎没有,看得上眼的都是有版权,要收费的,所以看看咱国的网站上的页面字体,千篇一律的宋体,这几年好点,随着Vista和Win7操作系统的普及,微软雅黑这个还算不错的字体,可以应用在网页上了,也仅限于用Vista和Win7系统的人浏览网页时可以见到,抱着XP系统的人,如果没有单独安装微软雅黑这个字体的话,那就还得是宋体伺候。

  今天给博客折腾了一个英文网络字体,字体名是Museo,一个老外开发的免费英文字体,觉得挺漂亮的,所以打算用在博客上,用来显示英文和数字使用,整完了现在看看效果还不错。

微信支付宝

标签: CSS @font-face 网络字体 Museo

评论3 引用0 浏览7159

信息列表:

楼主

Barret Lee
2014-01-29 01:15
我也写了一篇类似的文章,呵呵~
http://www.cnblogs.com/hustskyking/p/manufacture-font-face-in-web.html
笑傲江湖
2014-01-29 01:51
@Barret Lee:已拜读,已学习。你可是挖的深啊:)

楼主

dudu
2012-02-24 17:50
在线转换那个地址还不错哦!
说点什么:

正文内容:

 




图片博文
怎一个 热 字了得啊