分享
查看: 988|回复: 0

[分享] 低代码中,如何使用其他自定义字体库

[复制链接]

低代码中,如何使用其他自定义字体库

发表于 2023-5-24 18:28:45 来自 分享 只看大图 阅读模式 倒序浏览
zzv_icon988 zzr_icon0 查看全部
本帖最后由 18979425409 于 2023-5-25 09:40 编辑

在低代码平台中,你可以通过以下步骤来引入字体库:

1.首先,你需要找到你需要引入的字体库,可以从网上下载需要的字体文件。


2.将下载好的字体文件上传到你的项目文件夹中。

低代码中,如何使用其他自定义字体库

3.在低代码平台的css样式文件中,引入自定义字体。代码示例如下:
  1. @font-face {
  2.   font-family: "汉仪尚巍手书W"; /* 自定义 字体名称 */
  3.   src: url('/uploads/wechat/703071/file/更换字体/汉仪尚巍手书W.ttf') format('truetype')  /* url可以是当前项目的相对路径,也可以是字体的绝对路径 */
  4. }
复制代码

4.项目中引入css样式文件,实现字体的自定义
  1. THING.Utils.dynamicLoad([
  2.     '/uploads/wechat/703071/file/更换字体/汉仪尚巍手书W.css'
  3. ])
复制代码

5.在低代码中使用字体库,代码示例如下:
  1. var template = `<div id="p1" style='color:red;top:20px;left:20px;
  2.     font-family:汉仪尚巍手书W;position:absolute'>汉仪尚巍手书W 字体</div>`;
  3.     $('#div2d').append($(template));
复制代码

与文章内容相关的API和属性路径:
@font-face:https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face#%E6%A6%82%E8%BF%B0



avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t