标签：文本 网页 weight 字体 HTML5 测试 Test font CSS
1.font-size : 用于设置文字的字号
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
p{
font-size:30px/*字体大小为20px*/
}
</style>
</head><body>
<p>测试文本</p>
</body>
</html>
效果图：
2.font-family：用于设置字体
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
p{
font-family:"微软雅黑"；/*字体设置为微软雅黑*/
}
</style>
</head><body>
<p>测试文本</p>
</body>
</html>
效果图：
3.font-weight：用于定义字体粗细
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.one{
font-weight:normal;/*标准字体，默认*/
}
.two{
font-weight:bold;/*定义粗体*/
}
.three{
font-weight:bolder/*定义更粗*/
}
.four{
font-weight:lighter/*定义更细*/
}
.five{
font-weight:500/*数值取100-900；（100的整数值）定义由细到粗的字体，400等同于标准，700等同于粗体*/
}
</style>
</head><body>
<p class="one">测试文本1</p>
<p class="two">测试文本2</p>
<p class="three">测试文本3</p>
<p class="four">测试文本4</p>
<p class="five">测试文本5</p>
</body>
</html>
效果图：
4.font-style：用于定义字体分格，如斜体，倾斜的字体
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.one{
font-style: normal;/*默认值，显示为标准*/
}
.two{
font-style:italic;/*显示斜体的字体样式*/
}
.three{
font-style:oblique;/*显示倾斜的字体样式*/
}
</style>
</head><body>
<p class="one">测试文本1</p>
<p class="two">测试文本2</p>
<p class="three">测试文本3</p>
</body>
</html>
效果图：
5.font 综合属性：对字体进行综合设置
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.one{
font:italic bold 36px "微软雅黑";
}
/* 设置style：倾斜，粗体，size字号，famliy文字 */
</style>
</head><body>
<p class="one">测试文本1</p>
</body>
</html>
效果图：
6.@font-face：@font-face属性是cSS3的新增属性，用于定义服务器字体·通过@font-face属性，开发者可以在用户计算机未安装字体时，使用任何喜欢的字体。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
@font-face{
font-family: 字体名称;
src:url(字体路径);
}
</style>
</head><body>
<p class="one">测试文本1</p>
</body>
</html>
标签：文本,网页,weight,字体,HTML5,测试,Test,font,CSS 来源： https://blog.csdn.net/shengming_tutou/article/details/122645181
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。