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 规则中,您必须首先定义字体的名称,然后指向该字体文件。