zoukankan      html  css  js  c++  java
  • 精灵图与字体图标相关

    精灵图
    目的:为了有效的减少服务器接受和发送请求的次数,提高页面的加载速度
    sprites的使用
    1.精灵技术主要针对背景图片使用,就是把多个小背景图片整合到一个大图片中
    2.这个大图片也被称为sprites精灵图 或者 雪碧图
    3.移动背景图片位置,此时可以用 background-position
    4.移动的距离就是这个目标图片的x和y的坐标。注意网页中的坐标有所不同
    5.因为一半情况下都是往上往左移动,所以数值是负值。
    6.使用精灵图的时候需要精确测量,每个小背景图片的大小和位置。


    字体图标
    结构样式简单的图标用字体图标
    1.解压出来的文件夹font放到根目录下
    2.字体声明
    @font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?p4ssmb');
    src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?p4ssmb') format('truetype'), url('fonts/icomoon.woff?p4ssmb') format('woff'), url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
    }

    3.打开demo.html 找到想要的字体 复制出来

    4.设置字体
    span {
    font-family: 'icomoon';
    font-size: 100px;
    color: red;
    }
    例子:
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /* 字体声明 */

    @font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?p4ssmb');
    src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?p4ssmb') format('truetype'), url('fonts/icomoon.woff?p4ssmb') format('woff'), url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
    }

    span {
    font-family: 'icomoon';
    font-size: 100px;
    color: red;
    }
    </style>
    </head>

    <body>
    <span></span>

    </body>

    </html>

  • 相关阅读:
    基于CNN的图像检测算法
    深度学习网络架构(三):VGG
    深度学习网络架构(二):AlexNet
    jupyter notebook问题记录
    JavaScript学习笔记
    spring-boot学习
    项目部署到heroku遇到的问题
    Android开发百度地图应用——实现定位功能
    C9+heroku部署
    C# WebApi定时任务FluentScheduler的使用
  • 原文地址:https://www.cnblogs.com/dongweichang/p/15087519.html
Copyright © 2011-2022 走看看