web字体和图标(CSS查漏补缺)

文: jack同学

web字体和图标(CSS查漏补缺)_第1张图片
jack同学

  • web字体: 为了解决用户电脑上没有安装的字体

    • 可以使用font-family设置字体显示,需要用户电脑本身就支持某个字体

    • 第二种强制让用户下载该字体

      • 准备一个字体文件(一般公司设计师会提供),一般字体文件格式每个浏览器支持都不同,所以需要同一个字体的多个格式文件。(常见的字体格式有 .ttf / .otf / .eot / .woff / .woff2 / .svg

      • 使用@font-face指令制作一个新字体

        @font-face {
            font-family: "杰克体"; /*给新字体取名字*/
            src: url("./../font/杰克体.ttf"), /*指定新字体的路径*/
                 url("./../font/杰克体.eot"),
                 url("./../font/杰克体.woff"),
                 url("./../font/杰克体.svg");
        }
        
      • 使用新字体

        .icon {
            font-family: "杰克体" !important;
        }
        /* 当添加这个类名时,当前元素就使用了这个新字体了*/
        
- 当页面加载这个css文件时,浏览器会临时使用这个字体在这个页面,当页面关闭字体失效
  • 字体图标

    • 把需要的图标制作成web字体文件,使用web字体加载的方式使用。
    • 优点:字体图标数量可控,文件较小,效率更高,字体图标可设置颜色、大小、粗细等且不会改变字体图标的质量,不会模糊,因为他们本身就是字体。
  • 雪碧图(精灵图)

    • 一些小的图片合成为一张图片加载到页面,通过background-position定位图片显示
    • 根据公司情况使用雪碧图还是字体图标
    • 优点:只加载一张图片,减少文件大小,减少请求次数
  • 常用字体图标库网站

    • 阿里巴巴字体图标库https://www.iconfont.cn/

你可能感兴趣的:(web字体和图标(CSS查漏补缺))