简介
逛知乎的时候偶然发现了一款有趣的动态字体，叫做LeonSans，这款字体是作者为了庆祝儿子Leon的诞生而设计推出的（大神的世界...）
具体的动图效果可以去下方参考链接看看，真的眼前一亮~
用法
LeonSans有一个亮点，就是字体本身和效果是由代码构成的，相当于一个模版，可以供我们任意拓展，对前端程序员超友好欸~
入门步骤
-
下载源代码
可前往GitHub下载源码，地址在下方参考链接
下载后的文件夹名叫leonsans-master，文件目录如下
LeonSans文件目录 -
查看各种动态效果
进入example文件夹，里面是所有类型字体的文件
所有类型字体
因为网页中的路径关联还没有设置好，除了中间的这个index网页，其他网页直接打开是不能正常显示动态效果的......
同时，index网页囊括了所有字体类型，可供我们直接通过这里查看选取喜欢的类型
打开后内容如下
左侧菜单：选择查看的字体类型，并根据其中的名称对应到相应的网页
中间：字体效果展示
右上方操控板：调整字体样式，查看动态效果
-
引用字体
假设选定了名为gradient的字体，然后在example文件夹中找到对应名称的网页，在IDE中打开，把路径关联设置好。
用红框标出来的，带有src属性的都需要注意一下，看是否需要改动，主要分为两种情况
注意路径信息是否需要改动
- 路径是网页链接：可以不用改动。但我的建议是，按照这个路径把源文件下载到本地，这样可以避免因网络原因造成网页加载慢
- 路径是文件路径：直接在下载的源码文件夹里就能找到，然后改成可以定位到该文件的路径即可
再强调一下，引用字体时要注意src的设置是否正确，如果出现未正常显示效果的情况，一般是某个src的设置不正确导致的，检查一下路径是否正确
DIY步骤
（未完待续）
参考链接：
https://blog.csdn.net/sinat_33224091/article/details/102735666 LeonSans详细介绍
https://www.bilibili.com/video/av80091119/ LeonSans效果演示
https://github.com/cmiscm/leonsans GitHub项目地址（在这里可以下载到源代码）
https://leon-kim.com/ LeonSans官网（也是效果演示，打不开在第二个链接看录制也可以）
