• 前端笔记-css sprite,font+html,font+css


    使用Icon Fonts好处
    1.灵活性:轻松改变图标的颜色或其他css效果
    2.可扩展性:改变图标大小就像改变字体大小一样容易
    3.矢量性:缩放图标不会影响清晰度
    4.兼容性:字体图标支持所有现代浏览器
    5.本地使用:通过添加定制字体到本地系统,可以在不同的设计和编辑应用程序中使用
    他们


    工具
    IcoMoon
    https://icomoon.io/


    创建字体图标
    http://flowerboys.cn/font/


    字体文件格式:
    ETO
    IE专用字体

    WOFF Web字体最佳格式

    TTF mac 和 WIN操作系统

    SVG 用于字体渲染的一种格式 google 苹果

    考虑到兼容性,同时引入


    @font-face属性
    用法:
    @font-face{
    font-family:<family-name>
    src:[<url>[format(<string>#)?|<font-face-name>]]#;
    font-weight:<weight>;
    font-style:<style>;
    }

    @font-face{
    font-family: "imooc-icon";
    src: url("../fonts/icomoon.eot"); /* IE9 兼容模式 */
    src: url("../fonts/icomoon.eot?#iefix") format("embedded-
    opentype")/*IE6-8不显示问题,起作用的是?*/
    ,url("../fonts/icomoon.woff") format("woff")
    ,url("../fonts/icomoon.ttf") format("truetype")
    ,url("../fonts/icomoon.svg") format("svg");
    font-weight: normal;
    font-style: normal;
    }


    icomoon第三个按钮下载字体后解压
    demo里面取得十六进制码,放入<i></i>中注意前面加&#x后面加;


    font+css

    <i class="imooc-icon icon-pen"></i>
    .icon-pen:before{
    content:"e604";
    }

    1.:before伪元素 name前插入
    2.content属性

    下载界面preference可以改变use类型

    一个i标签插入两个元素

     

  • 相关阅读:
    pandas 流式导出excel
    django serializer 定制error_message
    selenium etree xpath使用总结
    Python之路--Python基础
    初见Flask
    Git
    MySQL补充——索引,流程控制,数据备份,python操作mysql,SQLAlchemy
    Python之路--Django--Ajax、同源策略、Jsonp、CORS
    Python之路--Django--form组件与model form组件
    Python之路--Django--中间件
  • 原文地址:https://www.cnblogs.com/jieyi/p/8360392.html
Copyright © 2020-2023  润新知