3.CSS字体属性

CSS Fonts(字体)属性用定义字体系列,大小粗细,和文字样式(如斜体)

3.1字体系列

CSS使用font-family属性定义文本字体系列

p { font-family:'微软雅黑' ;}

div {font-family: 'Microsoft Yahei', '微软雅黑' ; }

注意:各种字体之间必须用英文状态下的逗号隔开

          一般情况下,如果有空格隔开的多个单词组成的字体,加引号。

          尽量使用系统默认子弟字体,保证在任何用户的浏览器都能正确显示。

 代码示例:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性之字体系列</title>
    <style>
        h2 {
            font-family: '微软雅黑';
        };
        p {
            font-family: 'Times New Roman', Times, serif;
        }
    </style>
</head>
    <h2>pink的秘密</h2>
    <P>卢本伟牛逼</P>
    <p>卢本伟牛逼</p>
</body>
</html>

 

3.2字体大小

CSS使用font-size属性定义字体大小

     p {

         font-size: 20px;

         }

       注意:px(像素)大小是我们网页最常用的单位

                 谷歌浏览器默认文字大小为16px

                  可以给整个body指定整个页面文字的大小

                  标题具有特殊性需要单独指定文字大小。

                  代码实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体大小</title>
    <style>
        body{
            font-size: 16px;
        }
        /* 标题标签比较特殊,需要单独指定文字大小 */
        h2 {
             font-size: 18px;
         }
    </style>
</head>
<body>
    <h2>卢本伟牛逼</h2>
    <p>我卢本伟没有开挂</p>
    <p>我卢本伟没有开挂</p>
</body>
</html>

3.3字体的粗细

CSS使用font-weight属性设置文本字体的粗细。

     p{

          font-weight:bold;

      }

属性值 描述
normal 默认值(不加粗的)
bold 定义粗体(加粗的)
100-900 400等同于normal,而700等同于bold 注意数字后面不能加数字

    注意:学会让粗标签(如h和strong等)不加粗,或者其他标签加粗

               在实际开发中我们喜欢用数字

    代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体粗细</title>
    <style>
        .bold {
            /* font-weight:bold */
            /* 这个700的后面不要给单位 等价于bold都是加粗的效果 */
            /* 在实际开发中我们提倡使用数字 表示加粗或者变细 */
            font-weight: 700;
        }
        h2 {
            font-weight: 400;
            /* font-weight: normal;实际开发中用数字 */
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>优雅淡然</p>
    <p class="bold">前端必胜</p>
</body>
</html>

3.4文字样式

CSS使用font-style属性设置文本风格。

   p {

        font-style: normal;

      }

属性值 作用
normal 默认值,浏览器会显示标准的字体样式 font-style:normal
italic 浏览器会显示斜体的字体样式

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css字体属性之文字样式</title>
    <style>
        p {
            font-style: italic;
        }
        em {
            /* 让倾斜的字体不倾斜 赶紧脉动起来 */
            font-style: normal;
        }
    </style>
</head>
<body>
    <p>同学,上课时候的你</p>
    <em>下课时候的你</em>
</body>
</html>

3.5字体复合属性

字体属性可以把以上文字样式综合来写,这样可以节约代码:

body {

           font: font-style font-weight font-size/line-height font-family; 
         }
         注意:
         使用font属性时,必须按照上面的语法格式中循序书写,不能更换循序,而且各个属性之间用空格隔开。
         不需要设置的属性可以省略(取默认值)但必须保留font-size 和font-family属性,否则font属性不起作用。
        代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合属性</title>
    <style>
        /* 想要div倾斜 加粗 字号设置为16像素 并且微软雅黑 */
        div {
            /* font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: 'Microsoft yahei';
            line-height: normal; */
            /* 复合属性:简写的方式 节约代码 */
            /* 必须严格按照一下循序: */
            /* font: font-style font-weight font-size/line-height font-family; */
            font: italic 700 16px 'MicroSoft yahei';
        }
    </style>
</head>
<body>
    <div>三生三世十里桃花</div>
</body>
</html>

3.6字体属性小结

属性 表示 注意点
font-size 字号 我们通常用的单位是px像素,一定要跟上单位
font-family 字体 实际工作中按照团队约定来写字体
font-weight 字体粗细 记住加粗是700或者bold 不加粗是normal或者400 记住数字不要跟单位
font-style 字体样式 记住倾斜体是italic 不倾斜是normal 工作中我们常用normal
font 字体连写 1字体连写是有循序的 不能随意换位置的 2.其中字号和字体必须同时出现

 

     

                   

 

posted @ 2020-05-27 09:06  YXF1997  阅读(95)  评论(0编辑  收藏