如何在 Outsystems 中添加自定义字体？前段时间用Outsystems开发一个导出pdf功能时，使用到了自定义的字体，因为pdf里面使用的就是google的自定义字体，以保持原始的pdf和通过程序导出的pdf文件字体一致。如果你有使用C# 开发asp.net core项目的经历，其实为网页添加自定义字体是相当的方便的，但使用了像OutSystems这种低代码平台来开发项目，如何做呢？
如何在 Outsystems 中添加自定义字体？
Outsystems 的 UI 无疑是全面的，但有时您需要独特的设计来满足品牌或营销需求。在本文中，我将介绍几种使用外部字体的方法。
用例：
客户希望为其服务创建一个简洁的落地页，包括与支付系统的集成。主要关注点在于落地页的设计，他们希望使用与其品牌形象相符的预定义字体。
涵盖哪些内容？
- 使用本地下载的资源中的字体
- 直接从互联网添加自定义字体
先决条件：
– 对 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
【江湖人士】(jhrs.com)原创文章，作者：江小编，如若转载，请注明出处：https://jhrs.com/2025/54228.html
扫码加入电报群，让你获得国外网赚一手信息。
