在uniapp的小程序中使用自己的字体库

很多人下载字体库都是在阿里字体库找字体下载字体。但是我还是喜欢这个这个网站弄字体

1.假设我们找一个网站上面发现了不错的字体

1.1 我们打开控制台然后在网络中过滤woff,就找到了字体文件 

 在uniapp的小程序中使用自己的字体库_第1张图片

1.2 在网上找到字体转svg的网站 TTF转SVG - 在线转换图像文件  (我用ttf转svg不理想,用woff2文件转)可以下载文件也可以直接复制链接使用链接的方式

在uniapp的小程序中使用自己的字体库_第2张图片

在uniapp的小程序中使用自己的字体库_第3张图片

 然后将转化后的文件下载下来

2.生产字体

打开这个网站  IcoMoon App - Icon Font, SVG, PDF & PNG Generator   

在uniapp的小程序中使用自己的字体库_第4张图片

点击 左上角Import Icons 选择刚刚生产的svg文件

在uniapp的小程序中使用自己的字体库_第5张图片

 选择你需要的字体  当然 你可以导入多个字体库 然后在多个字体库中选择需要的字体

在uniapp的小程序中使用自己的字体库_第6张图片

 最后点击最下面一行的Generate Font 

在uniapp的小程序中使用自己的字体库_第7张图片

你可以在这里修改字体的名字,然后点击坐下角的download 进行下载,也可以点击旁边的设置进行一些设置 

下载后是这个样子的

在uniapp的小程序中使用自己的字体库_第8张图片

我们的字体文件就在fonts中,demo.html中有使用的方法

3.使用字体

我们在uniapp项目中的static 文件夹存放字体文件 首先我们将fonts文件复制到static下 然后复制style.css到这个文件夹下 注意修改css文件中字体文件的相对路径

在uniapp的小程序中使用自己的字体库_第9张图片

 

中App.vue问价中引入style.css

在uniapp的小程序中使用自己的字体库_第10张图片

 

 在uniapp的小程序中使用自己的字体库_第11张图片

 然后我们讲另一种方法就是使用base64这种类型的字体

首先打开字体转base64 的网站 File To Base64 Encoder | Convert any file | GiftOfSpeed

将我们的字体文件导入进去

在uniapp的小程序中使用自己的字体库_第12张图片

 在uniapp的小程序中使用自己的字体库_第13张图片

我用的是ttf文件 所以将ttf的代码复制  覆盖stly.css 的@font-face部分 其余部分不变

在uniapp的小程序中使用自己的字体库_第14张图片

 然后将生成的base64 替换到@font-face -> src  中的YOUR BASE64 STRING HERE 这个内容

然后再修改 @font-face ->  font-family 将可以了

 在uniapp的小程序中使用自己的字体库_第15张图片

 

你可能感兴趣的:(css,uniapp,字体)