7.13字体文本样式

一、字体属性

1、 font-size: ;

          px：  默认16px(从html那里继承来的)   常用12px 14px 15px 16px

          最小值12px   0px字体不显视 

          % ： 相对于父级字体大小 (不常用)

          em ： 1em 父级字体大小 (不常用)

          rem ：1rem html标签字体大小(默认16px)     (常用在移动端适配)

         html标签默认 16px   0 字体消失  12px 最小范围

2、 font-weight: ;

          bold 变粗 *  

          normal 正常 *  标题标签字体变细

          lighter 变细

          bolder 变更粗

          100 ~ 900 (不用)

3、font-family: ;

          有衬线体”（Serif）宋体

          无衬线体”（Sans-serif） 微软雅黑 黑体

          常用 微软雅黑 黑体 宋体

          衬线字体 serif 宋体 间隙末端以衬线结尾  

         非衬线字体 sans-serif 微软雅黑 黑体 线条粗细均匀

 引入外部字体:

             @font-face {

              给引入的外部字体一个名字

              font-family: zhuque;

              src: url(font/hychf.ttf);

            }

          然后再需要使用这款字体的地方使用

          font-family: zhuque;

注意：

 line-height  行高  每一行文字都具有这个行高 且在这个行高内上下居中  

          px    外部盒子没有设置固定高度 line-height可以撑高外部盒子

          em 相对于元素本身的字体大小   em可以省略 如 1.5em 省略为=> 1.5

          rem  html标签的字体大小

 4、 font-style

           体倾斜

           normal 正常的 i em

           italic 换成一种斜体字体

           oblique 强制倾斜文字

 重要点:

      font 复合写法  通常在样式初始化时设置给body

      字体大小/行高(必须放在倒数第二) 字体类型(必须放在最后)   出现其他的字体样式 需要放在字        体大小/行高之前

      12px/1.5 zhuque,Microsoft YaHei,Heiti SC,sans-serif

二、文本样式

1、 常用

text-align 文本对齐方式 让元素内的文本内容朝某个方向对齐 (文本内容包括 普通文字 行内特性元素 img ) ( 不控制元素本人的位置 )

          左对齐 left  默认

          右对齐 right

          居中对齐 center

          两端对齐 justify

        小布局 tips : 宽度不一致的小按钮 由内容撑开宽度 左右两侧padding

        宽度一致的小按钮 设置固定的宽度 然后使用line-height使文本上下居中使用text-align上下居中  上面的方式也可以使用  

2、不常用

        text-indent 首行缩进

          px

          em 相对于元素的字体大小

          rem

        text-transform 控制文本的大小写

          none 默认值

          lowercase 字母全部小写

          uppercase 字母全部大写

          capitalize 首字母大写

        text-decoration 文本修饰线

          a标签的默认样式 text-decoration:underline;

          del的默认样式  text-decoration:line-through;

        取消a标签的下划线

        text-decoration:none;

          none 取消  

          underline 下划线  

          line-through 中划线

          overline 上划线

        letter-spacing 字间距 识别单个字母或者文字

        word-spacing 词间距 (以英文单词 为单位)(实际上识别空格)

 

        white-space:; 文本换行方式

          normal 默认换行

          nowrap  不换行

        text-overflow: ; 文本溢出处理

          clip 默认 溢出的文本进行剪裁

          ellipsis 溢出隐藏的文本 用省略号替代

        限制外层 元素宽度

          white-space:nowrap;

          text-overflow: ellipsis;

          overflow: hidden; 实现单行文本 溢出 省略号

        多行文本溢出省略号

            word-break: break-all;

            overflow: hidden;

            text-overflow: ellipsis;

            display: -webkit-box;

            需要第几行出现省略号 就填几

            -webkit-line-clamp: 2;

            -webkit-box-orient: vertical;

        user-select 用户对文本的选择

          none 用户鼠标无法选中文本

三、vertical-align

        垂直对齐方式  只用在文本和行内 行内块之间 对齐问题

        默认基线对齐 ( 基线就是英文本上的 第三根线 )

        解决 图片下方小间隙的问题

        解决方案 给img 一个 vertical-align: middle;

     

        解决 文本和行内 行内块之间 对齐问题  

       有两个行内 或者行内块 对齐的话 就给双方一个 vertical-align: middle;  

       只是一个行内 和普通文本 对齐的话 使用 vertical-align: px;微调