记一次利用@font-face 生成自定义数字图标

所用工具

• iconfont 阿里的一款UI设计平台。
• css3的@font-face

操作

• 首先到iconfont 下载需要的数字图标，我找的一款叫做微淘数字。选择下载到本地

  
  
  QQ截图20210129165230.jpg

• 引入文件

  
  
  QQ截图20210129165546.jpg
  
  

  解压文件夹后，如图所示，你需要的各种资源文字字体都在里面

在html里面引入

##展示为，span里面就是你的数字对应的Unicode值


• 连续数字输入

##php可参考此方法
function get_font_num($num = '')
{
    $result   = '';
    $font_map = array(
        0 => 'xe600',
        1 => 'xe601',
        2 => 'xe602',
        3 => 'xe603',
        4 => 'xe604',
        5 => 'xe605',
        6 => 'xe606',
        7 => 'xe607',
        8 => 'xe608',
        9 => 'xe609',
    );
    for ($i = 0, $len = strlen($num); $i < $len; $i++) {
        $n = substr($num, $i, 1);
        if (is_numeric($n)) {
            $result .= '&#' . $font_map[$n] . ';';
        } else {
            $result .= $n;
        }
    }
    return $result;
}

• 修改Unicode
  如果感觉生成的Unicode太过简单，还可以自己定义，有两种方式，

1. 从iconfont修改后重新下载
   2.修改iconfont.css 里面对应的content

效果图

微信图片_20210129170408.png