在 AEM Mobile 应用程序中更改字体和颜色设置。

您可通过上传用于浏览页面卡、应用程序视图和 HTML 文章的字体来自定义应用程序。还可以更改在应用程序菜单、导航栏和登录提示等不同应用程序视图中使用的颜色。

 

使用自定义字体

您可以使用门户的“字体和应用程序自定义”部分上传在布局卡、HTML 文章和应用程序菜单等应用程序视图中使用的自定义字体。

在 HTML 文章中引用字体。请参阅创建适用于 AEM Mobile 的 HTML 文章:使用共享字体

  1. 在门户中,单击“内容和布局”,然后单击“字体和应用程序自定义”。选择“字体”选项卡。

    customize_fonts_main
  2. 要单独添加字体,请单击“添加”>“添加字体”。

  3. 将字体文件拖入“添加字体”部分,或单击“浏览”按钮并指定字体文件。

    拖放字体文件后,将自动添加字体名称。

    要提高性能并减小应用程序大小,我们建议将上传的字体限制为仅包含您计划在应用程序中使用的字体。

    添加字体
  4. 上传字体后,请指定编辑卡和布局、创建 HTML 文章或自定义应用程序视图时要使用的字体。

    从下拉列表中选择字体
    在编辑布局卡时选择已上传的字体。

  5. 构建或重新构建自定义应用程序,以预览字体。

    AEM Preflight 应用程序不显示自定义字体。无论何时添加或编辑字体,均必须构建或重新构建应用程序才能查看更改。

    请参阅预览适用于 AEM Mobile 应用程序的项目内容

注意:

请确保您拥有相应许可来使用您的应用程序中的字体。

批量添加字体

您可以将多种字体拖放到窗口中,而不是一次只添加一种字体。

  1. 在门户的“字体和应用程序自定义”部分中,单击“添加”>“批量添加字体”
  2. 选择要在 Finder 或资源管理器窗口中上传的字体文件,然后将所选字体文件拖放到图标上。
  3. 检查要上传的字体列表。选择任何您不希望上传的字体,然后单击显示的减号 (-) 图标。单击“上传”以上传字体。

设备字体和 Web 字体

只需使用设备字体便可在手机和平板电脑中显示字体。但是,对于您使用的每种字体,建议您上传设备字体(OpenType 或 TrueType)和 Web 字体 (.woff)。设备字体在手机和平板电脑上的浏览页面中使用。Web 字体用于桌面 Web 查看器中、Windows 应用程序中(如果无法安装 .otf 或 .ttf)以及卡中的预览字体。

借助适当的字体许可证,您应有权访问 woff. 版的字体。如果您获得字体的许可,该字体通常会包含在包中。有关详细信息,请与字体许可方联系。

不可上传您有权通过 Adobe Typekit 访问的字体。

 

注意:

只要您添加某种新字体,就必须重新构建您的应用程序以使该新字体可用。

使用 Windows 应用程序中的字体

Windows 实施由 Foundry 包含在字体中的字体使用规则。如果 Foundry 未将字体标记为“可安装”,则 Windows 操作系统将拒绝加载该字体。您可以通过右键单击字体并查看属性来检查字体是否已标记为“可安装”。为获得最佳效果,应包含适用于 Windows 应用程序的 Web 版本的字体 (.woff)。

自定义应用程序视图

您可以为应用程序中显示的不同视图(包括应用程序导航栏、应用程序菜单以及登录和付费专区屏幕)指定不同颜色和字体。您还可以在应用程序菜单中显示或隐藏“应用程序菜单”或“帐户”选项,并且您始终可以显示或隐藏导航栏。

请注意下列事项:

  • 应用程序自定义预览图像并不提供完全准确的显示效果。确保通过构建自定义应用程序来测试应用程序的自定义颜色和字体。
  • 颜色主题设置(浅色主题、深色主题或自定义主题)是适用于各个平台的所有视图的全局设置。浅色主题和深色主题是不可编辑的预设。如果更改任何颜色或字体设置,主题会切换到“自定义”。
  • 在导航到其他页面前,请确保单击“保存”以保存您的工作。“保存”仅会应用于当前平台。

应用程序自定义视频

应用程序自定义视频
此视频演示了在 2016.14 和 2017.1 中发布的新增应用程序自定义功能。

  1. 在门户中,单击“内容和布局”,然后单击“字体和应用程序自定义”。选择“应用程序自定义”选项卡。

    customize_allscreens
  2. 指定平台(iOSAndroid)。

    您指定的设置仅会应用于所选平台。此时无法保存自定义设置,因此您需要分别为 iOS 和 Android 指定应用程序自定义设置。

  3. 选择“所有屏幕”视图。要使用预设,请选择“浅色主题”或“深色主题”。如果您更改颜色或字体设置,则会自动选择“自定义主题”。对于自定义设置,请先转到“所有屏幕”视图,然后选择要使用的颜色和字体设置。

    选择“所有屏幕”时,所做更改会应用于所有视图。之后您可以调整各个视图的自定义颜色和字体设置。

    注意:

    字体和颜色设置与各个主题相关联:浅色主题、深色主题和自定义主题。当您选择一个不同的主题时,字体和颜色设置会重置。

  4. 在“所有屏幕”视图中,指定应用程序的手势设置。

    手指开合以缩放 - 指定是否为每种类型的文章启用或禁用手指开合以缩放手势。如果禁用此选项,则用户无法在文章视图中通过手指开合来放大或缩小。

    • 栅格文章选项包括已选择“使整个页面适应屏幕大小”选项的基于 InDesign 的文章和基于 PDF 的文章。
    • PDF 文章选项包括未选择“使整个页面适应屏幕大小”选项的基于 PDF 的文章。
    • HTML 文章选项包括基于 HTML 的文章。

    手指开合以关闭(仅限 iOS)- 在 iPad 上,您可以通过从浏览页面捏合手指返回到上一个视图。指定是否启用或禁用此手势。

    边缘轻扫(仅限 iOS)- 在 iOS 应用程序中,您可以从左侧轻扫以返回到上一个视图或者在顶级视图中显示“应用程序菜单”。指定是否启用或禁用此手势。

    customize_gestures
  5. 通过从菜单中选择选项或通过单击导航箭头选择单个应用程序视图,然后为该单个视图指定自定义颜色设置和字体设置。

    customize_app_appmenu2
  6. 要隐藏“应用程序菜单”或“帐户”选项,请导航到“应用程序菜单”视图。单击“应用程序菜单”图标可将其打开或关闭。或者,单击“登录”选项,以打开或关闭“帐户”选项。

    当“应用程序菜单”处于关闭状态时,应用程序菜单无法在应用程序中显示。

    当“登录”处于关闭状态时,“应用程序菜单”底部不会显示“帐户”选项。

    当“菜单栏”处于隐藏状态时,您可以使用 navto 和 goto 格式提供导航链接并触发“搜索”等功能。请参阅 AEM Mobile 中的超链接

    如果隐藏“登录”选项(UI 中的“帐户”选项)或“菜单栏”,可使用 HTML 和 Cordova JavaScript API 允许用户登录和注销。如需允许用户使用动态横幅登录或注销的示例代码,请参阅创建横幅和动态横幅:动态横幅

  7. 要更改导航栏行为,请导航到“应用程序导航栏”视图。从以下选项中为平板电脑和手机进行选择。

    默认 – 仅在用户点击文章中的一个非交互区域时才显示导航栏。显示导航栏时会遮挡文章内容。

    总是可见 – 如果选择此选项,导航栏会在导航屏幕和文章顶部显示并且无法隐藏。当导航栏设置为始终显示时,不会遮挡文章顶部的内容。HTML 文章会在导航栏下方屏幕的顶部开始。固定布局的文章会缩小并在其上下添加黑边。

    app_customization_example
    当导航栏设置为“总是可见”时,固定布局内容会缩小并在其上下添加黑边。

    总是隐藏 – 如果选择此选项,则会禁用并隐藏导航栏和状态栏。隐藏导航栏后,您可以在文章中使用 navto 和 goto 格式提供导航链接,并触发“后退”按钮和“社交共享”选项等功能。请参阅 AEM Mobile 中的超链接

    状态栏可见和导航栏隐藏 – 如果选择此选项,则会禁用和隐藏导航栏,并且始终显示状态栏。文章内容会在状态栏下方显示并根据需要进行缩放和在其上下添加黑边。

    app_customization_navbars
  8. 单击“保存”以保存当前平台的设置。

    单击“保存”以保存当前平台的设置。如果同时在 iOS 和 Android 平台上操作,请确保每个平台都单击了“保存”。

  9. 构建或重新构建自定义应用程序,以查看自定义应用程序设置。

    上传的字体和自定义应用程序设置内置于应用程序中。每次上传新的字体或更改应用程序自定义设置时,您都需要重新构建应用程序才能查看更改。

    AEM Preflight 应用程序不显示应用程序自定义设置。

    请参阅预览适用于 AEM Mobile 应用程序的项目内容

其他应用程序自定义方法

除了使用门户的“字体和应用程序自定义”部分以外,您还可以进行其他自定义更改。

  • 在项目设置中,您可以指定一个在应用程序菜单中显示的品牌图像
  • 构建应用程序时,您可以确定手机是双向 (iOS)、仅纵向还是仅横向。对于 iOS 和 Android 应用程序,您还可以确定应用程序是否适用于手机和/或平板电脑。
  • 集合设置中,您可以确定是否允许通过水平轻扫导航到不同的文章。您还可以确定集合是显示为浏览页面还是打开到集合中的第一个项目。您也可以允许用户保存集合以便脱机查看。
  • 使用布局模板可确定集合浏览页面的外观。
  • 您可以启用社交共享授权搜索等功能。

 

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略