lxpandsq 2015-12-09
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在页面上显示服务器端的字体</title>
<style>
@font-face{ font-family:webfont; src:url(font/qtgg.otf);}
@font-face{ font-family:Arial; src:local('Arial');}
h1{ font-family:webfont;}
h2{
font-family:Arial;
font-weight:lighter;
font-size: 10px;
}
h2.bold{
font-weight:bold;
font-size:30px;
}
h2.bolder{
font-weight:bolder;
font-size:50px;
}
</style>
</head>
<body>
<h1>在页面上显示服务器端的字体</h1>
<h1>Hello Html5 Css3</h1>
<h2 class=" bold">Hello Html5 Css3</h2>
<h2 class=" bolder">Hello Html5 Css3</h2>
</body>
</html>效果图:
使用 CSS3,网页设计师可以使用他/她喜欢的任何字体。只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。在新的 @font-face 规则中,您必须首先定义字体的名称,然后指向该字体文件。