在给前端界面做文字遮罩动画时,考虑到兼容性,我采用了svg的方法,而不是css的方法。总体来说效果还是不错的,如下所示
但是奇怪的是,非系统自定义字体在组件刚创建的时候总是不显示,甚至一片空白,只有在调试页面中,更改字体才会显示上面的效果。
起初查了很多关于svg自定义字体的解决方法,发现不奏效,所以我采用了另一种方法,通过path路径的方法。
但是上面这么复杂的路径怎么解决呢?
通过Adobe Inlustrator,它是做矢量图形的好软件,同时也能生成svg文件,这个功能拓宽了我前端开发的设计。
1、做你想要生成的矢量图像
这里我就输入一个大标题,实现自定义字体。
2、导出文件为SVG文件
点击菜单栏的文件→导出→导出为…,出现下面界面,然后导出对应文件
注意关键来了!我们需要生成的是path路径,而不是css样式