# 预览字体

- !
  \21
  exclam
- "
  \22
  quotedbl
- #
  \23
  numbersign
- $
  \24
  dollar
- %
  \25
  percent
- &
  \26
  ampersand
- '
  \27
  quotesingle
- (
  \28
  parenleft
- )
  \29
  parenright
- *
  \2a
  asterisk
- +
  \2b
  plus
- ,
  \2c
  comma
- -
  \2d
  hyphen
- .
  \2e
  period
- /
  \2f
  slash
- 0
  \30
  zero
- 1
  \31
  one
- 2
  \32
  two
- 3
  \33
  three
- 4
  \34
  four
- 5
  \35
  five
- 6
  \36
  six
- 7
  \37
  seven
- 8
  \38
  eight
- 9
  \39
  nine
- :
  \3a
  colon
- ;
  \3b
  semicolon
- <
  \3c
  less
- =
  \3d
  equal
- >
  \3e
  greater
- ?
  \3f
  question
- @
  \40
  at
- A
  \41
  A
- B
  \42
  B
- C
  \43
  C
- D
  \44
  D
- E
  \45
  E
- F
  \46
  F
- G
  \47
  G
- H
  \48
  H
- I
  \49
  I

第一步：使用font-face声明字体

    @font-face {
        font-family: 'fonteditor';
        src: url('fonteditor.eot'); /* IE9*/
        src: url('fonteditor.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('fonteditor.woff') format('woff'), /* chrome、firefox */
        url('fonteditor.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('fonteditor.svg#uxfonteditor') format('svg'); /* iOS 4.1- */
    }

第二步：定义使用fonteditor的样式

    .fonteditor {
        font-family:"fonteditor" !important;
        font-size:16px;font-style:normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
    }

第三步：挑选相应图标并获取字体编码，应用于页面

        <i class="fonteditor">&#x33</i>