重磅更新-UniApp自定义字体可视化设计

简介: 重磅更新-UniApp自定义字体可视化设计

重磅更新-UniApp自定义字体可视化设计。

DIY可视化为了适配不同APP需要,支持用户自定义字体,自定义字体后,设计出来的界面更多样化,不再是单一字体效果。用户可以使用第三方字体加入设计,在设计的时候选择上自己的字体,对应内容变成了自己想的个性化字体界面。

样式设置

进入样式设置,找到字体,自定义字体点击下

点击新增字体

点击新增字体名称跟font-family名字相同,然后里面的url指向到你服务器的地址。

字体模板如下,大家可以参照模板进行修改。首页把下载下来字体库放你的服务器,获取对应地址。

这里我们用了阿里妈妈字体为例

@font-face {  
  font-family: '阿里妈妈刀隶体';  
  src: url('//你的域名/AlimamaDaoLiTi.woff2') format('woff2'),  
       url('//你的域名/AlimamaDaoLiTi.woff') format('woff'),
    url('//你的域名/AlimamaDaoLiTi.ttf') format('truetype');  
  font-weight: normal;  
  font-style: normal;  
}  

使用字体

定义完成后,选择字体,加入字体到项目


设置字体

设置完字体后,在我们的字体库就能找到我们新增的字体了。

设计完成后,导出的源码字体就支持个性化字体库了。

目录
相关文章
|
1月前
|
数据可视化 API
低代码可视化工具-uniapp页面跳转传参-代码生成器
低代码可视化工具-uniapp页面跳转传参-代码生成器
77 2
|
26天前
|
数据可视化 前端开发 UED
低代码可视化-Uniapp Cascader级联选择器-代码生成器
Cascader级联选择器是一种常用的UI组件,适用于从具有层级关系的数据中进行选择,如省市区选择、公司层级选择等。它通过分组多列展示选项,支持多级分类、联动选择、搜索与过滤等功能。组件具备自定义样式、禁用选项、清空选项等特性,广泛应用于电商、企业内部系统等场景。代码示例展示了其详细的实现和调用方法。
34 7
低代码可视化-Uniapp Cascader级联选择器-代码生成器
|
1月前
|
数据可视化 API
低代码可视化-uniapp购物车页面-代码生成器
低代码可视化-uniapp购物车页面-代码生成器
33 1
|
1月前
|
数据可视化 JavaScript 前端开发
低代码可视化Uniapp点击事件-代码生成器
低代码可视化Uniapp点击事件-代码生成器
58 0
低代码可视化Uniapp点击事件-代码生成器
|
1月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
43 2
|
1月前
|
移动开发 数据可视化 JavaScript
DIY官网可视化设计导出UNIAPP源码
DIY官网可视化设计导出UNIAPP源码
34 2
|
1月前
|
移动开发 数据可视化 小程序
高颜值可视化设计UNIAPP源码生成器
高颜值可视化设计UNIAPP源码生成器
45 1
|
1月前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
29 0
|
1月前
|
JSON 数据可视化 JavaScript
低代码可视化-uniapp响应式数据data-代码生成器
低代码可视化-uniapp响应式数据data-代码生成器
36 0
|
1月前
|
数据可视化 安全 Android开发
低代码可视化-uniapp蓝牙标签打印-代码生成器
低代码可视化-uniapp蓝牙标签打印-代码生成器
60 0
下一篇
无影云桌面