很多人下载字体库都是在阿里字体库找字体下载字体。但是我还是喜欢这个这个网站弄字体
1.假设我们找一个网站上面发现了不错的字体
1.1 我们打开控制台然后在网络中过滤woff,就找到了字体文件
1.2 在网上找到字体转svg的网站 TTF转SVG - 在线转换图像文件 (我用ttf转svg不理想,用woff2文件转)可以下载文件也可以直接复制链接使用链接的方式
然后将转化后的文件下载下来
2.生产字体
打开这个网站 IcoMoon App - Icon Font, SVG, PDF & PNG Generator
点击 左上角Import Icons 选择刚刚生产的svg文件
选择你需要的字体 当然 你可以导入多个字体库 然后在多个字体库中选择需要的字体
最后点击最下面一行的Generate Font
你可以在这里修改字体的名字,然后点击坐下角的download 进行下载,也可以点击旁边的设置进行一些设置
下载后是这个样子的
我们的字体文件就在fonts中,demo.html中有使用的方法
3.使用字体
我们在uniapp项目中的static 文件夹存放字体文件 首先我们将fonts文件复制到static下 然后复制style.css到这个文件夹下 注意修改css文件中字体文件的相对路径
文章来源地址https://www.toymoban.com/news/detail-491047.html
中App.vue问价中引入style.css
<i class="icon-home3" style="font-size: 50px;"></i>
然后我们讲另一种方法就是使用base64这种类型的字体
首先打开字体转base64 的网站 File To Base64 Encoder | Convert any file | GiftOfSpeed
将我们的字体文件导入进去
我用的是ttf文件 所以将ttf的代码复制 覆盖stly.css 的@font-face部分 其余部分不变
然后将生成的base64 替换到@font-face -> src 中的YOUR BASE64 STRING HERE 这个内容
然后再修改 @font-face -> font-family 将可以了
<i class="icon-phone" style="font-size: 50px;"></i>
文章来源:https://www.toymoban.com/news/detail-491047.html
到了这里,关于在uniapp的小程序中使用自己的字体库的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!