zoukankan      html  css  js  c++  java
  • 关于字体图标的问题

    作为前端,我们经常需要和美工拿字体图标文件,经常遇到的有eot,ttf,woff,svg
    拿到字体图标文件,我们就要进行一个字体图标文件css编写,方便后期使用

    @font-face {
      /* 1.首先指定字体的系列,我们指定为字体图标 */
      font-family: "自定义字体图标名称";
      /* 2.接下来的代码指定了字体图标的路径,兼容了各种移动端浏览器和PC端浏览器,你可以根据自己的需要,删除不必要的兼容 */
      src: url('eot文件路径'); /* IE9*/
      src: url('eot文件路径#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('woff文件路径') format('woff'),
      url('ttf文件路径') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
      url('svg文件路径') format('svg'); /* iOS 4.1- */
    }
    /* 3.这里设置字体图标的默认样式,你可以更改默认样式 */
    .自定义字体图标名称 {
      font-family:"自定义字体图标名称" !important;
      font-size:16px;
      font-style:normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    /* 4.下面的代码就是我们的字体图标使用时引入的代码,通过伪元素 :before 引入的 */
    .icon-guangpan::before { content: "e604"; }
     
    .icon-zanting::before { content: "e64b"; }
    
  • 相关阅读:
    UI 常用方法总结之--- UITableView
    UITextFiled 通知监听
    ios 本地通知
    AFNetworking 请求头的设置
    UI总结
    gitlab-server环境搭建
    redis 配置文件示例
    搭建spark集群
    kafka集群安装
    zookeeper集群搭建
  • 原文地址:https://www.cnblogs.com/reyirfw/p/13159470.html
Copyright © 2011-2022 走看看