付费墙编辑工具中的自定义字体

视觉一致性是优秀设计的关键。在构建无代码付费墙时,您可能希望使用自定义字体以与应用的整体风格保持一致。本文将介绍如何自定义字体以及如何使用它们。

本节介绍新版付费墙编辑工具,适用于 iOS、Android 和 React Native SDK 3.0 或更高版本,以及 Flutter 和 Unity SDK 3.3.0 或更高版本。有关兼容 Adapty SDK v2.x 或更早版本的旧版付费墙编辑工具的信息,请参阅旧版付费墙编辑工具中的自定义字体

可自定义的内容

付费墙编辑工具中的每个文本元素都可以设置各自的字体和样式。您可以在每个文本元素的字体控件中进行调整:

56a8845-choose_font.webp

在某些情况下,为整个付费墙更改字体更为方便。您可以在付费墙编辑工具的 Layout 部分,通过调整付费墙字体来实现。

默认可用字体

在编辑工具中创建付费墙时,Adapty 默认使用系统字体。在 iOS 上通常为 SF Pro,在 Android 上通常为 Roboto,但具体字体可能因设备而异。您也可以从常用字体中选择,例如 Arial、Times New Roman、Courier New、Georgia、Palatino 和 Verdana。这些字体各自提供了若干样式选项:

f9d87dc-default_fonts.webp

这些字体不作为 Adapty SDK 的一部分提供,仅用于预览。我们无法保证它们在所有设备上均能完美运行。但根据我们的测试,这些字体通常无需额外操作即可被大多数设备识别。您也可以查看 iOS 上默认可用的字体

如何向 Adapty 看板添加自定义字体

如果默认字体无法满足需求,您可以添加自定义字体。添加后,自定义字体将在整个应用中可用,您可以将其用于任意付费墙上的任意文本行。

  1. 在任意字体下拉菜单中选择 Add custom font
7498a5a-add_custom_font.webp
  1. Add Custom Font 窗口中:
    1. 上传您的字体文件(最大大小:10MB)。
    2. 输入一个名称以便在付费墙编辑工具中引用该字体。
    3. 为两个平台分别指定正确的字体名称。
    4. 如果尚未添加,请确保字体文件已包含在应用的 bundle 中。
89fb748-CleanShot_2024-02-07_at_13.21.552x.webp

您上传的字体文件不会发送到设备,仅用于预览。我们的 SDK 在渲染付费墙时只接收引用所用字体的字符串。因此,您必须将相同的字体文件包含在应用 bundle 中,并提供正确的平台特定字体名称,才能确保一切正常运行。放心,这不会花费太多时间。

通过向 Adapty 上传字体文件,您确认自己拥有在应用中使用该字体的权利。

获取 iOS 上的正确字体名称

获取字体正确 ID 有两种方法:第一种需要编写少量代码,第二种则使用 macOS 上的”字体册(Font Book)“应用。

如果您已将自定义字体添加到应用的 bundle 中,很可能已经通过字体名称引用了它。为确认这一点,可调用 UIFont.familyNames() 获取字体的家族名称,然后将其传入 UIFont.fontNames(forFamilyName: familyName)。您可以在 viewDidLoad 中执行此操作,之后再删除该代码片段:

override func viewDidLoad() {
    super.viewDidLoad()
  	...
  	for family in UIFont.familyNames.sorted() {
    		print("Family: \(family)")
	    	let names = UIFont.fontNames(forFamilyName: family)
    		for fontName in names {
        		print("- \(fontName)")
    		}
    }
}

上述代码中的 fontName 就是您需要的内容,其形式可能类似于 “MyFont-Regular”。

第二种方法更为简便:在 Mac 上安装字体,打开 Font Book 应用,找到该字体,并使用其 PostScript name

bb8a902-CleanShot_2024-01-12_at_20.32.222x.webp

获取 Android 上的正确字体名称

如果您已正确将字体文件添加到资源文件夹中,只需提供文件名即可。请确保文件名为小写字母,且仅包含字母、数字和下划线,否则可能无法正常使用。

您可以通过调用 ResourcesCompat.getFont(context, R.font.my_font) 来确认文件名是否正确,其中 my_font 是您使用的文件名。在这种情况下,my_font 就是您在 Adapty 中创建自定义字体时应输入的内容。

将字体文件添加到应用的 bundle

如果您的应用中已在其他地方使用了自定义字体,只需以相同方式添加付费墙字体即可。如果尚未使用,请确保将字体文件包含在应用项目和 bundle 中。具体操作请参阅以下文档:

从 Adapty 下载字体包时,您将收到一个包含所有字体变体的压缩包。为减小应用体积,请只将付费墙实际使用的特定字体文件添加到应用 bundle 中。例如,如果您的付费墙只使用了 OpenSans-Regular.ttf,则无需将 OpenSans-Bold.ttf 包含在应用 bundle 中。