web前端的恐怖之旅（6）：字体文本属性

一，字体样式

---

1. 字体大小：

   font-size:12px;：具有继承性（系统限制最小为12像素，0为没有）

   • 单位 :

     • ）， px 不给时，默认12像素 eg： 一般给body设置12px的字体大小
       

     • ），em 父级字体大小 eg：1em，父级字体大小×1倍

       ​ - em用在不是font-size的地方，代表当前标签字体大小

     • ）， rem html根标签的字体大小 eg：2rem 两倍的html字体大小
       - rem的用处：是个相对单位，适用于移动端，适应不同屏幕

     • ）， % 相对于父级字体大小计算​

2. 字体类型：

   • font-size:;：Chrome默认微软雅黑，IE默认宋体，不同的字体会影响网页布局，必须统一

     • ），设置多个字体及备用字体：font-size:"黑体","微软也黑"；

     • ），sans-serif ： 非衬线字体：字体粗细较均匀，比较黑，圆滑

     • ），serif ： 衬线字体：末端加粗，间隙和末端或者以衬线字体结尾的一类字体

     • ），引入别的字体（使用微软雅黑就行了，别的有版权问题）

       @font-face{
           font-family:"我的字体"
           src:url("font/font.ttf")
       }
       引入:
       span{
           font-size:"我的字体"
       }
       

3. 字体粗细：

   • font-width:;
     • *），bold ：加粗
     • *），normal ：正常，用于元素本身需要清除默认加粗样式
     • ），100~900 ：100加粗最小，900加粗最大（不要使用）
     • ），lighter ：细的
     • ），normal ： 更粗的

4. 字体倾斜：

   • font-style:;
     • ），normal ：元素（i em）本身需要清除默认样式时
     • ），italic ：倾斜字体
     • ），oblique ：使字体倾斜（当某些字体没有设计倾斜字体）

5. 定义小型大写字母：

   • font-variant:;
     • ），small-caps ：让小写字母变成大写字母 但比普通大写字母小一点，大写字母不变

6. 行高：

   • line-height:;让文字在这个高度里面居中，能撑开行内块，块级但是不能撑开行内块高度

     • ），px ：像素值 eg：line-height:20px；

     • ），em ：父级字体大小 eg：1em，父级字体大小×1倍

     • ）， rem ：html根标签的字体大小 eg：2rem 两倍的html字体大小

     • ），% 相对于当前元素的字体大小

     • 行间距 = 行高 - 字体大小
       

       坑点：line-height不能让图片居中
       

       • 在没让图片上下左右居中：

         

         

7. 符合写法

   注意：必须写字体大小（倒数第二）和字体类型（倒数第一）

   eg：font:12px/1.5(line-height) "微软雅黑";

   • 写法：

     font ：随便写	12px(字体大小)/1.5(行高)	"微软雅黑"
     

     坑点：如果用复合写法不写行高值，会默认给一个normal值

二，文本样式

---

1. text-align:; ：文本对齐方式 控制包括：文字，行内元素，行内块，图片

   • left 左对齐 默认值

   • right 右对齐

   • center 居中对齐（可以配合行高正中对齐）

   • justify 两端对齐（只支持多行文字）解决右边文字参差不齐的情况

     前：

     后：

2. text-indent:; ：首行缩进

   • px 相当于给及像素的宽
   • em 相当于当前字体大小

3. text-transform:; ：控制文本的大小写

   • uppercase 字母全部大写
   • lowercase 字母全部小写
   • capitalize 首字母大写

4. text-decoration:; ：文本修饰

   • none 取消文本样式，常用在a身上

   • underline 下划线

   • line-through 中划线

   • overline 上划线

5. letter-spacing:; ：字(字符)间距

   • px 字符之间的距离

6. word-spacing:; ：单词之间间距

   • px 单词之间间距

7. white-sapce:; ：换行

   • wrap 默认换行

   • nowrap 不换行

     • 省略号三步走（不适用于行内,行内块元素）：

       • white-sapce:nowrap; 使文字不换行

       • overflow:; ：溢出隐藏 hidden隐藏

       • text-overflow ：ellipsis ellipsis省略号

       • 

8. word-bread:break-all; ：解决单词太长不换行，难看的情况

三，转义字符

​ & ：开头 ；：结尾

​ 小于号：<

​ 大于号：>

​ 空格：