站点图标 江湖人士

如何在 Outsystems 中添加自定义字体？

江小编
如何在 Outsystems 中添加自定义字体？

如何在 Outsystems 中添加自定义字体？

如何在 Outsystems 中添加自定义字体？前段时间用Outsystems开发一个导出pdf功能时，使用到了自定义的字体，因为pdf里面使用的就是google的自定义字体，以保持原始的pdf和通过程序导出的pdf文件字体一致。如果你有使用C# 开发asp.net core项目的经历，其实为网页添加自定义字体是相当的方便的，但使用了像OutSystems这种低代码平台来开发项目，如何做呢？

如何在 Outsystems 中添加自定义字体？

Outsystems 的 UI 无疑是全面的，但有时您需要独特的设计来满足品牌或营销需求。在本文中，我将介绍几种使用外部字体的方法。

用例：
客户希望为其服务创建一个简洁的落地页，包括与支付系统的集成。主要关注点在于落地页的设计，他们希望使用与其品牌形象相符的预定义字体。

涵盖哪些内容？

  1. 使用本地下载的资源中的字体
  2. 直接从互联网添加自定义字体

先决条件：
– 对 CSS 的基本了解将非常有益。

使用自定义字体的一般流程

使用本地下载的资源中的字体

正如我之前提到的，我们将使用谷歌字体，为此，请使用此链接访问所有字体。您无需注册或拥有使用谷歌字体的特殊帐户。

您可以在屏幕左侧的筛选栏中输入具体请求来查找所需的字体。之后，打开选定的字体。在打开的窗口中，点击屏幕右上角的“获取字体”按钮。

选择“全部下载”按钮后，它将下载 .zip 文件。将其解压到本地存储中已下载的文件夹中。

打开文件后，你会看到几个 .ttf 格式的字体。这里我只使用其中一种，但如果你想全部使用，则需要为每种字体创建单独的类。

现在转到您的 Outsystems 项目，数据选项卡，右键单击资源并选择导入资源。选择一个 .tff 文件。

选择您上传的文件并将部署操作更改为下面给出的选项。

现在转到“Interface”选项卡并打开应用程序的.css 文件

提示：如果你没有引入Themes的Style文件，可以直接在你需要的Screen里面直接添加。如下图那样：

添加下面的 CSS 样式

@font-face {
    font-family: 'Roboto';
    src: url('{your_path}') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.roboto {
    font-family: 'Roboto', sans-serif;
}

注意：上面代码块中的 {your_path} 来自上传字体的目标目录字段。

最后，将新创建的样式添加到文本中

在下图中，您可以看到更改后的发布结果

就这样，让我们​​回顾一下如何直接从互联网上调用它们

注意：一个 CSS 文件只能使用一种自定义字体。如果您的多个屏幕使用了不同的自定义字体，请确保在每个屏幕上分别使用它们。

直接从互联网添加自定义字体

如果您不想下载文件，可以使用以下代码。在本例中，我使用了 Google 字体和 Montserrat 字体样式。自定义类名此处为 motserrat。

@import url('https://fonts.googleapis.com/css2?family=Montserrat'); 

.montserrat { 
    font-family: 'Montserrat'; 
}

参考引用地址：https://itnext.io/how-to-add-to-ui-external-fonts-in-outsystems-0c86f321e8d5

退出移动版