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

这篇具有很好参考价值的文章主要介绍了在uniapp的小程序中使用自己的字体库。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

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

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

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

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

2.生产字体

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

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

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

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

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

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

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

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

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

下载后是这个样子的

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

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

3.使用字体

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

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

 文章来源地址https://www.toymoban.com/news/detail-491047.html

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

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

 

<i class="icon-home3" style="font-size: 50px;"></i>

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

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

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

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

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

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

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

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

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

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

<i class="icon-phone" style="font-size: 50px;"></i>

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

 

到了这里,关于在uniapp的小程序中使用自己的字体库的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序怎么开发?怎么开发自己的小程序

    一、明确需求与定位 在开发小程序之前,需要明确需求. 首先,明确小程序的定位非常重要。我们需要确定小程序是为了提供便捷的购物体验还是特定领域的服务。明确定位可以帮助我们更好地设计和优化小程序的功能,以符合用户的期望和需求。 其次,了解目标用户群体也

    2024年02月22日
    浏览(49)
  • 微信如何创建自己的小程序?

    微信如何创建自己的小程序?微信小程序成为了很多商家、企业甚至是个人在互联网中的营销工具,微信小程序基本上可以说是属于必备工具。那么微信如何创建自己的小程序呢?下面一起来给大家说说。 一、注册小程序账号 微信如何创建自己的小程序。首先要有一个小程

    2024年02月12日
    浏览(42)
  • uniapp的小程序中使用web-view进行相互传参,并监听web-view的返回键

    H5页面中 1.引入微信js https://res.wx.qq.com/open/js/jweixin-1.4.0.js 2.引入 uniapp 的jdk文件(去官网下到本地)( 引入一定要放到body下面,不然UniAppJSBridgeReady不生效 ) 3.写好UniAppJSBridgeReady vue页面中接收值 在vue的h5页面中 在uniapp页面中通过@message拿值 原因:官方说小程序使用web-view是

    2024年02月08日
    浏览(51)
  • 如何创建自己的小程序?零编程一键创建实战指南

    当今瞬息万变的数字世界中,拥有一个属于自己的小程序已成为企业与个人展示、服务和互动的重要途径。无需编码知识,通过便捷的云端可视化平台,也可以轻松创建一款符合自身需求且功能丰富的小程序。下面给大家分享如何创建自己的小程序。 1 、选择一个易用的小程

    2024年01月25日
    浏览(48)
  • 教你如何写一个符合自己需求的小程序日历组件

    很多时候,我们生活中会有各种打卡的情况,比如 keep 的运动打卡、单词的学习打卡和各种签到打卡或者酒店的入住时间选择,这时候就需要我们书写一个日历组件来处理我们这种需求。 但是更多时候,我们都是网上找一个插件直接套用了,有没有想过自己实现一下呢?如果

    2024年02月10日
    浏览(44)
  • 使用HbuilderX3.8.3_把开发的小程序发布为Html5页面上传到_免费托管空间---uniapp_小程序开发工作笔记009

       找了很久,毕竟自己也是做测试,本来想买个服务器来着,由于了一下,还是给我找到了最终~ 自己做的小程序想部署,又不想买阿里云服务器,部署到阿贝云也不错,阿贝云会给开发者提供,  免费虚拟主机 和 免费的云服务器,最近我用了一段时间感觉还很不错也很稳定我测试用完

    2024年02月03日
    浏览(42)
  • 基于uniapp的仿书旗小说的小程序

    书旗小说是阿里文学旗下手机阅读APP,拥有阿里文学平台上的小说资源 [1] 。书旗小说除了拥有传统阅读器的书籍同步阅读、全自动书签、自动保存阅读历史、点击翻页、全屏文字搜索定位、自动预读、同步更新等功能外,更有离线书包、增强书签以及资讯论坛等扩展内容,

    2024年02月12日
    浏览(68)
  • 这样使用chatgpt方可完成自己的小项目了

    使用GDScript 编写一个台球小游戏的项目功能有哪些 台球小游戏的项目功能如下: 开始界面:包括游戏开始按钮、游戏说明按钮、游戏设置按钮等,通过按钮实现用户与游戏的交互。 游戏场景:包括游戏背景、桌面、球、球杆等元素,通过精灵或节点等组件实现。 游戏规则:

    2024年02月05日
    浏览(41)
  • 小程序开发费用一览表,如果你也想要用低成本制作出自己的小程序,来了解一下!

    近几年来微信小程序的发展的十分的迅速,越来越多的用户对小程序已经非常熟悉,同时很多商家都看到了小程序的商机,其中小程序商城更是受到众多用户和商家的欢迎。 制作小程序商城主要的方式有两种,一种是源码定制开发,一种是直接套用小程序模板了。而其中大家

    2023年04月08日
    浏览(59)
  • 使用uniapp实现小程序图片和视频的下载功能

    提示:本人亲测可直接使用 url: http 图片/视频 is_video:false图片下载 true视频下载 提示:这是使用的小程序,可以去体验

    2024年02月11日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包