第43章服务器端字体和@font-face属性

最新推荐文章于 2025-12-02 22:03:53 发布

最新推荐文章于 2025-12-02 22:03:53 发布 · 151 阅读

文章标签：

#html5 #css #@font-fac

阅-H52 专栏收录该内容

35 篇文章

订阅专栏

本文介绍如何在网页上使用服务器端字体，通过HTML、CSS和Web字体实现个性化字体展示，包括样式设置、不同字号与权重的自定义。

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

效果图：