跳至主要內容

字体规范

字体规范

Glyphix 框架中内置了一些系统字体，应用程序也可以定义自己的字体。

系统级字体

所有运行 Glyphix 的环境中都保证提供这些系统字体：

  • sans-serif：默认的无衬线字体。

不同的设备提供的实际字体文件可能不同，但这些字体名总是可用的。

默认字体

如果一个界面元素没有指定所有的字体属性（字体族、字号等），剩余属性将使用系统默认值。因此，当界面元素没有任何字体属性时就会使用系统默认字体。默认字体属性是由设备指定的，并具有以下属性：

字形回退问题

由于设备性能的限制，无法预装所有语言和字符集的完整字体。我们将只提供特定语言的“主要字体”，这些字体通常包括常见的字母、数字和符号。然而，如果你尝试使用不常见字符、特殊符号或者是未包含在这些主要字体中的字符，就会出现“字形回退”现象。

当一个字符无法被当前支持的字体渲染时，它会回退显示为一个“方框” ，例如这是用不支持中文的 Roboto 字体显示“Hello, 世界。”文本的效果：

其中“世界。”三个字符不受支持，所以被渲染为三个方框。

应用级字体

字体映射文件

manifest.config.fontFaces 字段可配置应用级字体映射文件。这是一个只包含 @font-face 规则的 CSS 文件，其中定义的字体可以直接在本应用中使用，而无需引用 CSS 文件。

假设字体映射文件在项目中的路径为 src/assets/font-faces.css，那么 manifest.config.fontFaces 字段需要填写为

{
  "config": {
    "fontFaces": "assets/font-faces.css"
  }
}

以下是 src/assets/font-faces.css 文件内容的示例

@font-face {
  font-family: Montserrat;
  src: url("fonts/Montserrat-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

还可以通过 @import 规则导入其他 CSS 文件，但字体映射文件中只会保留 @font-face 规则信息。

@font-face 规则

也可以直接在 CSS 中使用 @font-face 规则来定义并使用字体。这种方法和一般的 Web 开发流程类似。

提示

相比于在各个 CSS 中定义字体，字体映射文件中定义的应用级字体运行效率更高，应当优先使用。

何时使用应用级字体

对于性能和资源受限的设备来说，系统提供的默认字体具有较低的资源占用和更好的性能表现，开发者应当优先使用。只有在特定需求中才建议使用应用级字体，以下是具体的准则：

  • 优先使用系统级字体：系统级字体经过优化，能够减少存储占用和处理开销。它们在多数情况下能够满足普通文本显示的需求，例如菜单、主页面、描述性文本等。
  • 特定设计需求使用自定义字体：如果应用需要符合特定的视觉设计风格或品牌要求时，可以使用自定义字体。例如，应用可能要显示一个有独特风格的数字时钟，或强调某些标题、按钮中的文字，使用自定义字体可以实现更符合设计语言的效果。
  • 自定义字体应精简字符集：为了避免不必要的存储和处理开销，自定义字体的字符集应尽可能精简。通常情况下，只需要包含拉丁字母、数字以及必要的标点符号。例如，在设计数字时钟时，自定义字体应仅包含 0∼90 \sim 9 的数字字符。

注意

不要在应用中使用大型字体文件（例如中文字体）。大尺寸的字体文件可能会带来严重的性能和资源风险。通常，系统级字体已包含当前语言所需的字符支持，无需通过自定义字体来补充字符集。

rem 字号单位

为了在不同的设备上实现和系统一致的字体风格，我们引入了和 Web 开发稍微不同的 rem 单位。1rem 是设备厂商定义的系统正文字号，当 CSS 中不定义 font-size 属性时，元素的默认字号就是 1rem。rem 和 px 或 pt 等长度单位没有固定的换算关系。1rem 的字号通常对应 24px 到 32px 左右。

使用 rem 作为字号单位可以确保系统中所有的应用具有一致的显示。不要用 px 等单位设置字号，否则可能无法跨设备使用。具体来说，建议使用以下配置：

  • 标题用 1.25rem 字号，多级标题可以适当选择其他字号；
  • 正文用默认字号，即 1rem，且一般不要显式指定该字号；
  • 脚注用 0.85rem 字号。

建议开发者挑选少量且固定的字号档位，并在上述 33 种场景中使用我们推荐的字号。

Glyphix framework