通过CSS设置字体样式

字体样式

<span>(双标签)：没有任何语义的标签，通常和CSS结合使用。

font-family 设置字体类型

代码语言：javascript复制

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

浏览器显示

代码语言：javascript复制

<!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 设置字体风格

代码语言：javascript复制

div span{
              font-family: 宋体;
              font-size: 24px;
              font-style:italic; //为了尽量少的代码只截出关键处。
        }

浏览器显示

font-weight 设置字体的粗细

代码语言：javascript复制

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 "宋体";

size 浏览器

0 人点赞