重磅更新-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;  
}  

使用字体

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

设置字体

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

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

本例子所用的是阿里妈妈字体库。点击进入阿里妈妈字体库下载

相关推荐
前端百草阁20 分钟前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜21 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40421 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish22 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple22 分钟前
typescript里面正则的使用
开发语言·javascript·正则表达式
小五Five23 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序23 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫54124 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
酷酷的威朗普25 分钟前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
前端每日三省25 分钟前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript