DINPro-Bold2字体/din字体/fontmin的使用

912 阅读1分钟

设计要我将数字字体都改成din,然后发给我了一个字体包

企业微信截图_16523476294806.png

记录一下使用方法

1.下载fontmin软件

fontmin软件下载

1652347878(1).png

2.将字体包拖拽到框框里面

185ff634f9395c617e33b4b6b422dcb.png

上面能看到我输入的1000已经变成了din字体的1000了,上面的框里输入仅仅是测试,随便写什么数字都行

3.点击生成按钮,将以下的全部文件复制到项目所在的文件夹

d8026859785e6540856dbcb9e3cad80.png

4.在项目中引入 html文件:

1652348281(1).png

vue项目:

如果是在能用es6的import的情况,可以直接全局引入 @import "./DINPro-Bold2.css";,最好单独抽一个文件夹装这些东西

5.修改font-family

1652348443(1).png

1652348489(1).png

上面的图片的font-family一定要和下面的一致

5.效果

1652348610(1).png

1652348627(1).png

直接vscode的右键open with live server (live server是vscode插件,要安装),局域网下 替换ip就可以直接手机上看效果~

第二张就是效果哦~