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,网站终于可以使用字体以外的预先选择“合法”字体。

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

nächsten Abschnitt

neue Datei

<!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>

einreichen Code zurücksetzen

Automatische Operation

Ganzer Bildschirm