|
这篇文章的主题是CSS3属性 ： @font-face
楼主很喜欢CSS3的一些新增属性，给我们前端程序员带来了非常很多福利，我们的页面也可以做的更加的美观。
直接放效果图吧，因为代码较长，放在最下面了；
关于浏览器的兼容性问题 
Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。
在这顺便做个倡导： 全民抵制IE ( 不知道有木有用处 ~~o(>_p{
margin-left:155px;
}
@font-face {
font-family: myCatF;
src: url("font/catH.ttf")
}
.cat1{
font-family: myCatF;
color:#f00;
}
@font-face {
font-family: mySweet;
src: url("font/tiantian.ttf")
}
.sweet{
font-family: mySweet;
color:#FF891F;
}
@font-face {
font-family: myHoney;
src: url("font/heart.ttf")
}
.honey{
font-family: myHoney;
color:#FFE379;
}
@font-face {
font-family: myFlower;
src: url("font/tiantian.ttf")
}
.flower{
font-family: myFlower;
color:#0f0;
}
@font-face {
font-family: Evil;
src: url("font/evil.ttf")
}
.evil{
font-family: Evil;
color:#00FFF0;
}
@font-face {
font-family: blank;
src: url("font/blank.ttf")
}
.blank{
font-family: blank;
color:#1FD1FF;
}
@font-face {
font-family: wing;
src: url("font/wing.ttf")
}
.wing{
font-family: wing;
color:#AA00FF;
}
(・-・*) 暂定这样，不忙了以后再来补充
楼主还有一篇关于字体设定的博客也作为参考： http://blog.csdn.net/freedomvenly/article/details/78873712
|