重新认识web前端-字体样式和文本样式

最新推荐文章于 2022-07-20 19:22:07 发布

oldfour_0830_9674

最新推荐文章于 2022-07-20 19:22:07 发布

阅读量217

点赞数

本文链接：https://blog.csdn.net/qq_41163341/article/details/108047445

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

字体样式和文本样式

字体样式
文本样式
- 行高
- 文本装饰

字体样式

字号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        .box{font-size:14px;}
        .box h1{font-size:100%;}
        .box p{font-size:100%;}
       
        
    </style>
</head>
<body>

    <!-- 

        font-size  字号
                    chrome 最小字号12
                    默认字号 16px

                    继承性（元素向后代元素传递属性的机制）

                    px/百分比(相对于父元素的字号)
                    / em (相对单位，相对于字号，计算font-size相对于父元素的字号)

     -->

    <div class="box">
        <h1>标题</h1>
        
        直辖市： 北京 | 上海 | 天津 | 重庆
        <p>这是一个P<span>元素</span></p>
            直辖市： <span>北京</span> | 上海 | 天津 | 重庆
            
            直辖市： 北京 | 上海 | 天津 | 重庆</div>
    
</body>
</html>

字体系列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        /* .box{font-family: "宋体";} */

        .box{font-family: "幼圆","微软雅黑";}
              
    </style>
</head>
<body>

    <!-- 

        font-family  字体，字体系列
                    
                     宋体   simsun             IE默认
                     微软雅黑 Microsoft YaHei  chrome,firefox(默认)

                     字体名称，是汉字，带有空格、特殊字符 加 引号包含

                     多个字体逗号隔开（后备机制）

                

     -->

    <div class="box">
      
        
        直辖市： 北京 | 上海 | 天津 | 重庆
        <p>这是一个P<span>元素</span></p>
            直辖市： <span>北京</span> | 上海 | 天津 | 重庆
            
            直辖市： 北京 | 上海 | 天津 | 重庆</div>
    
</body>
</html>

字体加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

      
       
        .box strong{font-weight: normal;}
        .box span{font-weight: bold;}
              
    </style>
</head>
<body>

    <!-- 

       font-weight: 是否加粗
                    normal正常（不加粗）
                    bold  加粗
                

     -->

    <div class="box">
      
        <strong>直辖市</strong>
        ： 北京 | 上海 | 天津 | 重庆
        <p>这是一个P<span>元素</span></p>
            直辖市： <span>北京</span> | 上海 | 天津 | 重庆
            
            直辖市： 北京 | 上海 | 天津 | 重庆</div>
    
</body>
</html>

字体风格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

      
       
        .box em,.box i{font-style: normal;}
        .box span{font-style: italic;}
              
    </style>
</head>
<body>

    <!-- 

       font-style:字体风格（ 是否以斜体显示）
                    normal正常（不倾斜）
                    italic (倾斜）
                
        
     -->

    <div class="box">
      
        <em>直辖市</em>
        
        ： 北京 <i>|</i> 上海 | 天津 | 重庆
        <p>这是一个P<span>元素</span></p>
            直辖市： <span>北京</span> | 上海 | 天津 | 重庆
            
            直辖市： 北京 | 上海 | 天津 | 重庆</div>
    
</body>
</html>

文本样式

行高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

      .box{background:red;font-size: 20px; line-height:2;}
   

              
    </style>
</head>
<body>

    <!-- 

        line-height:行高
                   概念：
     						两行文本【基线】之间距离
                 			小写x的下边缘
                    特性：
                        实现单行文本垂直居中  占位                       

                        测量：
                             文字高+行间距

                             px / 数值(字号的倍数)

                    
     -->

    <div class="box">直辖市直<br/>辖市直辖市直辖市</div>
   
    
</body>
</html>

文本装饰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

           

    .box{ letter-spacing: 20px;}
    .box2{ word-spacing: 20px;}

    </style>
</head>
<body>

    <!-- 

        text-decoration: 文本装饰 
                         none  无
                         underline 下划线
                         line-through 中划线

                         overline 上划线


                         没有继承性

        text-align: 内容水平方向的对齐方式
                    left 左对齐
                    center居中
                    right 右
                    justify 两端对齐

        text-indent:首行缩进
                      em相对单位

                      允许负值


        color:  文字颜色 

                颜色表示方法：
                    red 颜色名称关键字

                    #ff0000  16进制表示法
                                #RRGGBB
                                    red    00-ff
                                    green
                                    blue
                                
                                #000000  黑色
                                #ff0000  红色
                                #00ff00  绿色
                                #0000ff  蓝色
                                #ffffff  白色

                                简写：
                                    #000000  #000
                                    #ff3366 #f36 

                    rgb(r,g,b) 
                                取值 0-255

                                    rgb(0,0,0)  黑色
                                    rgb(0,255,0)  绿色
                                    rgb(0,0,255)  蓝色
                        
             letter-spacing:字符间距


             word-spacing:词间距 
                            hello world
                            以【空格】为解析依据

     -->
     

   

    <p class="box">abc123直辖市直直辖市直直辖市直直辖市直直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直辖市直直辖市直直辖市直</p>

    <p class="box2">hello world 直辖 市直直辖市直直辖市直直辖市直直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直辖市直直辖市直直辖市直</p>
 
    
</body>
</html>

oldfour_0830_9674

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
重新认识web前端-字体样式和文本样式

字体样式和文本样式字体样式字号字体系列字体加粗字体风格文本样式行高文本装饰字体样式字号<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib
复制链接

扫一扫