其他分享
首页 > 其他分享> > 琐碎知识点5

琐碎知识点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