html字体相关知识的拓展

五、字体的其他样式

                1、设置一个文字大小 

                font-size: 30px;

                2、设置一个字体 

                font-family: Arial, Helvetica, sans-serif;

                3、设置文字斜体

                font-style  

                可选值：normal  文字正常显示

                              italic  文字斜体  比较常用

                              oblique  文字斜体

                4、设置文字的加粗

                font-weight  

                可选值:

                normal  文字正常显示  默认值

                bold/bolder  文字加粗

                100-900之间的数值   100是最细，900最粗  

                5、设置一个小型大写字母

                font-variant: ;

                可选值：

                normal  文字正常显示  默认值

                small-caps  字母小型大写字母

                6、font 可以同时设置以上所有的字体相关的样式，颜色不可以

                注意：

                1、必须有字体大小和字体

                2、字体必须在倒数第一位，字体大小必须在倒数第二位

六、行间距           

           1、行高（line height）

            文字占有的实际高度

           行高=上间距+字体的大小+下间距

             其中，字体是垂直居中显示，上间距=下间距

            line-height  设置行高

               可选值：

                 （1）直接放一个大小，例如：40px

                 （2）还可以放倍数，是当前字体大小的倍数

                 （3）可以放百分比

             2、单行文本在父元素中垂直居中

                     只要设置父元素的行高和高度一致即可

             3、font中也可以指定行高

                     font:字体大小/行高  字体类型;

七、文本样式

1: text-transform 可以用来设置文本的大小写

可选值：

            none     默认值，文本正常显示

            lowercase  文本以小写字母显示

            uppercase  文本以大写字母显示

            capitalize  首字母大写

2: text-decoration  [dɛkə'reɪʃ(ə)n] 可以用来设置文本的修饰

可选值：

              none  默认值，文本正常显示

              overline  上划线

              underline  下划线

              line-through  删除线    

3: letter-spacing可以指定字符间距

4: word-spacing可以设置单词之间的距离

5: text-align用于设置文本的对齐方式

可选值：

                left  默认值  文本靠左显示

                right  文本靠右显示

                center  文本居中显示

                justify  两端对齐      

#: display  设置元素的相互转换

display属性实现 元素之间的相互转化

             可选值：

               none    隐藏元素

               block   将元素专成块元素

               inline   将元素转成行内元素

               inline-block  将元素转成行内块元素

            注意：元素之间的相互转换，可以用，但还是标签的本来分类为主

6: text-indent 设置首行缩进

                 可选值：

                   常用长度单位： px，em ，rem

7: white-space: ; 设置网页如何处理空白

8: text-overflow 文本溢出包含元素时发生的事情 

            设置单行文本的省略号固定写法 

            设置一个固定的宽度

            width: 200px;

            设置换不换行

            white-space:nowrap;

            裁剪多余 

            overflow: hidden;

            设置溢出内容以省略号的形式出现

            text-overflow: ellipsis;

9: text-shadow:;  设置文本的阴影

               4个参数：

                 (1)、阴影的水平位移距离   正值向右偏移，负值向左偏移   必选

                （2）、阴影的垂直位移距离   正值向下偏移，负值向上偏移   必选

                （3）、阴影的模糊半径       可选    默认0px

                （4）、阴影的颜色  一般用rgba颜色  可选，默认是字体的颜色

10: box-shadow:; 设置盒子的阴影

               4个参数：

                 (1)、阴影的水平位移距离   正值向右偏移，负值向左偏移   必选

                （2）、阴影的垂直位移距离   正值向下偏移，负值向上偏移   必选

                （3）、阴影的模糊半径       可选    默认0px

                （4）、阴影的颜色  一般用rgba颜色  可选  默认是黑色

11:vertical-align  

             作用：1、设置图文对齐方式

                  2、解决图片三像素的问题

            可选值：

              baseline  基线对齐  以英文x最底下为对齐标准

              bottom   底部对齐

              top      顶部对齐

              middle   居中对齐  

    

    @ 面试题：什么是图片三像素的问题，如何解决这个问题

        1、vertical-align 设置非baseline默认值即可

        2、可以设置其父元素的font-size为0,注意如果父元素里有文字，需要重新设置字体大小

        3、可以讲图片转成块元素

        4、将元素脱离文档流，例如可以设置浮动，设置弹性盒子，设置绝对定位

八、知识回顾

          行内元素

             不会独占一行，宽高是被内容撑开,是不可以设置宽高的

           块元素

             宽度是祖先元素的100%，高度是被内容撑开

           行内块元素

             不会独占一行，可以设置宽高，有三像素的问题