在uni-app小程序项目中使用字体图标和在普通web项目中使用字体图标区别不是特别大,唯一需要注意的点就是在字体文件的选择上,如果是web项目需要引入除ttf外的其它字体文件以保证兼容性; 维护比普通图片要稍微麻烦一些,如果你使用了iconfont字体图标,你后面图标管理必须依赖iconfont的管理平台,如果要添加、修改或者删除图标,...
uni-app中使用字体 1.将字体引入项目,本地文件或者线上文件都可以 2.在app.vue中引用 @font-face { font-family: my-font; src: url('~@/static/my-font.ttf'); } 3.使用 .text-myfont{ font-family: my-font }
一般在static建font文件夹,直接把字体包放在新建的文件夹下面,在app.vue引入字体包,全局可使用 当本地字体文件大于40kb,需要转化为 base64 格式 字体转换网站:https://www.giftofspeed.com/base64-encoder 先选择.ttf文件,白色方框里面就是base64格式的文件 @font-face { font-family:'字体名字'; src: url(da...
将字体文件放入项目中: 将字体文件放入你的 UniApp 项目的static或assets文件夹中。通常推荐放在static文件夹中,因为static文件夹下的文件不会被 Webpack 处理,而是直接复制到最终的打包目录中。 在CSS中引用字体: 在 CSS 文件中(可能是App.vue的部分或单独的 CSS 文件),使用@font-face规则来定义你的字体。例如:...
uni-app支持使用字体图标,使用方式与普通web项目相同,需要注意以下几点: 支持base64 格式字体图标。 支持网络路径字体图标。 小程序不支持在css中使用本地文件,包括本地的背景图和字体文件。需以base64方式方可使用。 网络路径必须加协议头https。 从http://www.iconfont.cn 上拷贝的代码,默认是没加协议头的。
Iconfont资源的使用 uni-app 本地路径图标字体支持情况: 字体文件小于 40kb,uni-app 会自动将其转化为 base64 格式 字体文件大于等于 40kb, 需开发者自己转换,否则使用将不生效 字体文件的引用路径仅支持以 ~@ 开头的绝对路径(不支持相对路径) 资源的引入(a,b两种方式) ...
就是这样然后找到对应的字体,进入下载 2.在你的uniapp项目下新建一个目录,然后将下载.ttf文件直接拖进这个font目录下就可以,直接上图! 3.这一步就是在项目中使用了, 1.在页面中的中引用 就是这样使用了,大家如果有更好的方法,欢迎评论交流! 祝大家财源滚滚。 编辑于 2021-11-...
nvue中不可直接使用css的方式引入字体文件,需要使用以下方式在js内引入。nvue内不支持本地路径引入字体,请使用网络链接或者base64形式。src字段的url的括号内一定要使用单引号。 vardomModule=weex.requireModule('dom');domModule.addRule('fontFace',{'fontFamily':"fontFamilyName",'src':"url('https://......
本文主要讲述的是在使用uniapp中如何引入iconfont图标,以及两种常用的位置。 位置一:App下原生导航栏的按钮使用字体图标。 位置二:页面中的任意位置使用iconfont图标。 第一步:打开iconfont官网新建项目并添加自己所需要的图标 这里是iconfont的网址链接: iconfo