借助font-weight实现响应式图标实例页面

展示

代码

• HTML：

  <i class="icon icon-small">&#x1f3a4;</i>
  <i class="icon icon-medium">&#x1f3a4;</i>
  <i class="icon icon-large">&#x1f3a4;</i>

• CSS：

  @font-face {
    font-family: ICON;
    src: url(icon-large.eot);
    src: local("☺"),
         url(icon-large.woff);
    font-weight: 700;
  }
  @font-face {
    font-family: ICON;
    src: url(icon-medium.eot);
    src: local("☺"),
         url(icon-medium.woff);
    font-weight: 400;
  }
  @font-face {
    font-family: ICON;
    src: url(icon-small.eot);
    src: local("☺"),
         url(icon-small.woff);
    font-weight: 100;
  }
  
  .icon {
    font-family: ICON;
    display: inline-block;
    background: #efefef;
    width: 1em;
    line-height: 1;
    font-style: normal;
  }
  
  .icon-large {
    font-weight: 700;
    font-size: 128px;
  }
  .icon-medium {
    font-weight: 400;
    font-size: 64px;
  }
  .icon-small {
    font-weight: 100;
    font-size: 16px;
  }