css嵌入任意字体
2015-07-01 16:40
561 查看
在好多项目中,都需要用到一些特殊的字体,但这些字体不是每个人都有的。当某个用户的系统字体库中没有你预先设置的字体,这将使你的网页效果大大折扣。切图是解决办法之一,当遇到如下图所示的情况的时候,显然切图并不是最佳方案。css嵌入任意字体
- 小丸子 - 小丸子
我们再来看看谷姐的网页,他们的导航就采用了切图的方法,而他的背景是一张大图片,当网速较慢的时候,就会出现如下的画面,这让人觉得很不和谐。
鉴于此,css嵌入任意字体在某些情况便可以发挥它的优点了。
下面我说一下如何实现的:
1.准备好你的字体,建议最好是.ttf,因为.ttf可以被高版本的chrome和ff3.0+直接调用,(暂时没有找到资料说可以在css直接调用.fon)。
2.准备转换.ttf到.eot的软件,我暂时找到两种:Microsoft Weft和ttf2eot(一个命令行程序)。据我的使用经验,Microsoft Weft是图形化软件,但如果转换压缩中文字库会失败(其实不是报错,只是转不了),所以如果要转换中文字体的就要用ttf2eot了。ttf2eot的使用方法非常简单:将字体文件和本程序放在同一目录,然后在cmd运行TTF2EOT <***.ttf> ***.eot就可以了。
3.把这两个文件都复制到你的项目文件夹中,在css文件中输入如下代码,就可以在目前所有主流上显示你的字体了:
@font-face{font-family:'yahei';src:url(../images/msyh.ttf); font-style:normal; font-weight:normal}
@font-face{font-family:'yahei';src:url(../images/msyh.eot);}
*{margin:0;font-family:'yahei';}
代码解释:font-family:字体的名称,src:路径,font-style和font-weight可以不写,这根据你的需要;第一行是针对ff、chrome、opera、Safari浏览器的,第二行就是针对ie的。经我测试,如果第一行和第二行在同一个css文件下,ff会失效,所以应该新建一个css文件,把第二行写入,然后用<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" /><![endif]-->导入,就可以解决这个问题。
就这样,任务完成!
不过,Every coin has two sides,我总结了一下css嵌入任意字体的优缺点:
优点:对于英文网站来说,这是个很好的方法,因为英语只有26个字母,所以字库文件再大也是有限的,所以如果你的项目是英文网站,或者做个英文的logo或者导航的话,这是个很好的方法,因为没有了图片,可以大大增加你的浏览速度。
缺点,如果是做中文网站的话,就不建议了,因为中文字库很大,10m-20m+很正常(不过也有小的),这对于用户体验非常不利;当然你也可以弄一个制作ttf文件的软件(Font Creator Program)回来,这样就可以修改字体库的大小。不过,如果只是涉及到少量中文字体的话,这也是个不错的方法之一,毕竟没有了图片。
- 小丸子 - 小丸子
我们再来看看谷姐的网页,他们的导航就采用了切图的方法,而他的背景是一张大图片,当网速较慢的时候,就会出现如下的画面,这让人觉得很不和谐。
鉴于此,css嵌入任意字体在某些情况便可以发挥它的优点了。
下面我说一下如何实现的:
1.准备好你的字体,建议最好是.ttf,因为.ttf可以被高版本的chrome和ff3.0+直接调用,(暂时没有找到资料说可以在css直接调用.fon)。
2.准备转换.ttf到.eot的软件,我暂时找到两种:Microsoft Weft和ttf2eot(一个命令行程序)。据我的使用经验,Microsoft Weft是图形化软件,但如果转换压缩中文字库会失败(其实不是报错,只是转不了),所以如果要转换中文字体的就要用ttf2eot了。ttf2eot的使用方法非常简单:将字体文件和本程序放在同一目录,然后在cmd运行TTF2EOT <***.ttf> ***.eot就可以了。
3.把这两个文件都复制到你的项目文件夹中,在css文件中输入如下代码,就可以在目前所有主流上显示你的字体了:
@font-face{font-family:'yahei';src:url(../images/msyh.ttf); font-style:normal; font-weight:normal}
@font-face{font-family:'yahei';src:url(../images/msyh.eot);}
*{margin:0;font-family:'yahei';}
代码解释:font-family:字体的名称,src:路径,font-style和font-weight可以不写,这根据你的需要;第一行是针对ff、chrome、opera、Safari浏览器的,第二行就是针对ie的。经我测试,如果第一行和第二行在同一个css文件下,ff会失效,所以应该新建一个css文件,把第二行写入,然后用<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" /><![endif]-->导入,就可以解决这个问题。
就这样,任务完成!
不过,Every coin has two sides,我总结了一下css嵌入任意字体的优缺点:
优点:对于英文网站来说,这是个很好的方法,因为英语只有26个字母,所以字库文件再大也是有限的,所以如果你的项目是英文网站,或者做个英文的logo或者导航的话,这是个很好的方法,因为没有了图片,可以大大增加你的浏览速度。
缺点,如果是做中文网站的话,就不建议了,因为中文字库很大,10m-20m+很正常(不过也有小的),这对于用户体验非常不利;当然你也可以弄一个制作ttf文件的软件(Font Creator Program)回来,这样就可以修改字体库的大小。不过,如果只是涉及到少量中文字体的话,这也是个不错的方法之一,毕竟没有了图片。
相关文章推荐
- CSS3动画(性能篇)
- CSS3下实现边框阴影效果(下)-翘边阴影效果
- CSS3下实现边框阴影效果(上)之曲线阴影
- CSS3 animation 逐帧动画
- css学习小结
- HTML 与 CSS 中值得注意的要点(持续更新)
- 嵌套表格 边框合并的css如何设置
- 关于CSS预处理器(less,sass)
- css3之Transition(转换)
- css垂直居中的方法
- 最简洁的CSS清除浮动的方法
- CSS3制作Freebie标签
- 动态添加删除css/js文件
- css布局-从display,position,float属性谈起
- CSS动画
- IE7浏览器下CSS属性选择器二三事
- CSS学习
- CSS学习2——文字以及图像
- CSS经验
- CSS大杂烩(1)