CSS3 字体

@font-face是CSS3中的一个模块,它主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体就不用再为只能使用Web安全字体烦恼了!肯定会有人问,这样的东西IE能支持吗?我告诉大家@font-face这个功能其实早在IE4就支持了,你肯定会感到惊讶。如果你看到一些英文网站或blog看到一些很漂亮的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,一句话这些都是@font-face实现的。


首先我们一起来看看@font-face的语法规则:

@font-face {

  [font-family: ;]?

  [src: [ [format(#)]? | ]#;]?

  [unicode-range: #;]?

  [font-variant: ;]?

  [font-feature-settings: normal|#;]?

  [font-stretch: ;]?

  [font-weight: ];

  [font-style:

使用CSS3,网站终于可以使用字体以外的预先选择“合法”字体。

注意: 需要引入外部字体文件显示效果。


继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> * {margin:0; padding:0;} body { background-color: #fc0; padding-top: 50px;} ul li { list-style: none;} a { text-decoration: none;} .clear { clear:both;} .layout { width:604px; margin:0 auto;} .layout li { display: block; float: left; border-right: 1px solid #930808; } .layout li.last-child { border-right: none;} .layout li a { display: block; width: 120px; height:120px; line-height: 120px; text-align: center; background-color: #f00;} .layout li a i { color:#fc0;} .layout li a:hover i { color:#fff;} @font-face { font-family: "icomoon"; src:url('fonts/icomoon.eot?-9731bi'); /*↑兼容IE9兼容模式打开IE8及其以下浏览器可以显示;*/ /*↓兼容IE9可以显示;*/ src:url("fonts/icomoon.eot?#iefix") format("embedded-opentype"), url("fonts/icomoon.woff") format("woff"), url("fonts/icomoon.ttf") format("truetype"), url("fonts/icomoon.svg") format("svg"); /*EOT { 微软开发用于嵌入网页中的字体,IE专用字体; } **WOFF { Web字体中最佳格式,被W3C推荐; } **TTF { 由Microsoft和Apple联合开发的一套字体标准,是Mac OS和Win操作系统中最常见的的一种字体; } **SVG { 用于SVG字体渲染的一种格式,是由W3C制定的开放标准的图形格式; } */ font-weight: normal; font-style: normal; } .icon { font-family: "icomoon"; font-style: normal; font-weight: normal; font-size: 90px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /*抗锯齿属性*/ } </style> </head> <body> <!-- ul.layout>li*5>a[href=#]>i.icon --> <!-- Sublime Text 快捷拼写 --> <ul class="layout"> <li><a href="#"><i class="icon"></i></a></li> <li><a href="#"><i class="icon"></i></a></li> <li><a href="#"><i class="icon"></i></a></li> <li><a href="#"><i class="icon"></i></a></li> <li class="last-child"><a href="#"><i class="icon"></i></a></li> <div class="clear"></div> </ul> </body> </html>
提交重置代码