琐碎知识点5

元素的层级

1.对于开启了定位的元素，可以用z-index属性指导元素的层级。

2.z-index需要一个整数作为参数，值越大元素的层级就越高，元素的层级越高越优先显示。

3.如果元素的层级一样，则优先显示靠下的元素。

4.祖先的元素的层级再高也不会盖住后代元素。

 

 

宏观上用浮动，细节微调用定位。

 

 

 

字体相关样式

 

1.color 用来设置字体颜色

2.font-size 字体的大小

　　-和font-size相关的单位：

　　　　-em 相当于当前元素的一个font-size

　　　　-rem 相对于根元素的一个font-size

3.font-family 字体族（字体的格式）

　　-可选值：

　　　　-serif 衬线字体

　　　　-sans-serif 非衬线字体

　　　　-monospace 等宽字体

　　　　　　-指定字体的类别，浏览器会自动使用该类别下的字体。

　　-font-family 可以同时指定多个字体，多个字体间使用,隔开，字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推。

5.font-face

　　-可以将服务器中的字体直接提供给用户去使用

@font-face {
    /* 指定字体的名字 */
    font-family:'myfont' ;
    /* 服务器中字体的路径 */
    src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
}

　　-问题：1.加载速度2.版权3.字体格式

6.图片放大会失真，字体是矢量不会。

 

 

图标字体（iconfont）

1.在网页中经常需要使用一些图标，可以通过图片来引入图标。但是图片大小本身比较大，并且非常的不灵活。 所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入，这样我们就可以通过使用字体的形式来使用图标。

2.fontawesome 使用步骤

　　-下载 https://fontawesome.com/

　　-解压

　　-将css和webfonts移动到项目中

　　-将all.css引入到网页中

3.使用图标字体

　　-直接通过类名来使用图标字体（class="fas fa-bell" class="fab fa-accessible-icon"）

　　-通过伪元素来设置图标字体

　　　　-找到要设置的图标的元素通过before或after选中

　　　　-在content中设置字体的编码

　　　　-设置字体的样式（有两种font-family）

　　　　　　-fab

　　　　　　-font-family: 'Font Awesome 5 Brands';

　　　　　　-fas

　　　　　　-font-family: 'Font Awesome 5 Free';

　　　　　　-font-weight: 900;

li::before { 
    content: '\f1d8'; 
    font-family: 'Font Awesome 5 Free'; 
    font-weight: 900; 
    color: blue; 
}

　　-通过实体来使用图标字体

　　　　-&#x图标的编码;

　　　　-例子：<span class="fas">&#xf0f3;</span>

4.使用阿里的图标字体库（iconfon）（推荐，使用方法与上相同）

 

学识浅薄，如有错误，恳请斧正，在下不胜感激。

 

标签：知识点,family,元素,字体,使用,font,琐碎,图标
来源： https://www.cnblogs.com/yin-jie/p/13756363.html