通过CSS设置字体样式
<span>(双标签)：没有任何语义的标签，通常和CSS结合使用。
- font-family 设置字体类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{text-align: center;}
div span{font-family: 宋体;}
</style>
</head>
<body>
<div>我是<span>SPAN标签</span></div>
</body>
</html>浏览器显示
- font-size 设置字体大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{text-align: center;}
div span{font-family: 宋体;font-size: 24px;}
</style>
</head>
<body>
<div>我是<span>SPAN标签</span></div>
</body>
</html>
浏览器显示
- font-style 设置字体风格
div span{
font-family: 宋体;
font-size: 24px;
font-style:italic; //为了尽量少的代码只截出关键处。
} 浏览器显示
- font-weight 设置字体的粗细
div span{
font-family: 宋体;
font-size: 24px;
font-style:italic;
font-weight:bold;
}浏览器显示
这样设置嫌麻烦还可以在一个声明中设置所有字体属性
浏览器显示
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型；
总结
- font-family——设置字体类型——font-family:"宋体";
- font-size——设置字体大小——font-size:12px;
- font-style——设置字体风格——font-style:italic;
- font-weight——设置字体的粗细——font-weight:bold;
- font——一个声明中设置所有字体属性——font:italic bold 36px "宋体";
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2019-12-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读