调整文本大小与颜色.

学习 DXPR Builder搭建页面设置元素样式

把导语句放大，用品牌颜色排引文，或在深色照片上用白色标题。用 Style 面板中的 Font size 和 Font color，一次改变一个元素的全部文本。只改一段文本的一部分，请改用文本编辑器的工具栏。全站共用的大小和颜色请用主题设置。

本视频按下面的配方操作：把一句话做成大字号品牌色的导语。

开始之前

  • 在 DXPR Builder 中打开页面；指向元素即显示带 More 的控制栏。刚接触构建器？请参阅您的第一页。
  • Save（对话框中）将修改保留在编辑器中。内容上方构建器工具栏上的 Save 保存页面并显示 "Saved field"。
  • Style 面板用于一个元素：导语句、引文、照片上的标题。
  • 文本编辑器用于一段文本的一部分和结构。用 Heading 2 或 Heading 3 把标题做成真正的标题，不要把 Normal 行放大。屏幕阅读器和搜索引擎读的是级别，不是大小。
  • 编辑器的 Styles 列表用于品牌文本样式。网站管理员在 General Settings > Text Editor > Custom styles (/admin/dxpr_studio/dxpr_builder/settings) 下设置。
  • 主题用于正文的字体、标题大小和链接颜色。

配方：品牌色的导语句

  1. 添加 Text 元素，以 Normal 文本输入一两句话。
  2. 悬停，点击 More，再点击 Settings。
  3. 打开 Style 面板，将 Font size 拖到 20。拖动时文本同步变大。
  4. 打开 Font color，从色板中选择品牌颜色，或在颜色字段输入色值，如 #1a4d8f。
  5. 点击对话框中的 Save。20 px 的句子算正文，对比度需达到 4.5 比 1。请在对比度检查工具中输入您的色值和背景色；白色页面是 #ffffff。
  6. 点击工具栏上的 Save。

某文本元素的 Style 面板，Font size 为 20，旁边是 20 px 品牌蓝 #1a4d8f 排的招生团队导语

您会看到的内容

文本元素 Style 面板中打开的 Font color 选择器，选中紫色 #7C5CFA，旁边是该紫色的标题和句子

句子变为 20 px 并染上品牌颜色。同一文本元素内的标题和链接也染上该颜色，但标题保持自己的大小。

设置如何工作

字号

Font size 范围 0 到 100 px，0 表示沿用主题大小。该值在所有屏幕尺寸下相同：桌面端 48 px 的行，在手机上也是 48 px。

大小作用于元素，有自己大小的文本保持不变。标题通常如此，因为 Bootstrap 按页面基准大小给标题定尺寸。用编辑器字号工具定过大小的文本也保持不变。

字体颜色

选择器在有主题色板时以色块展示，还带不透明度滑杆和输入色值的字段，如 #1a4d8f。选择器中的 Clear 让文本回到主题颜色。

在文本、卡片、提醒等内容元素上，颜色作用于内部一切，包括标题和链接。在版块上只作用于没有自己颜色的文本。主题着色的标题和链接在那里保持原色。

Bootstrap 颜色类标有 !important，优先级高于 Font color。一例是 HTML classes 下的 Primary text color 芯片。另一例是部分文本上的编辑器样式，如 Primary Brand Text。

在按钮上，颜色作用于按钮本身并取代主题的悬停色。请也在 Hover style 中设置 Font color。

悬停

悬停样式面板（Hover style）有自己的 Font color 和 Font size。悬停时放大字号会推动周围内容，因此改颜色通常是更稳妥的选择。

对比度

要让大多数人看清文本，WCAG 2 AA 级要求以下对比度：

文本 与背景的对比度
正文 至少 4.5 比 1
大文本：24 px（18 pt）及以上，或加粗 19 px（14 pt）及以上 至少 3 比 1

在照片上，请按文本背后最亮处衡量。用对比度检查工具测试您的颜色组合，如 WebAIM contrast checker。

如果看不到效果

  • 文本内的标题没有变大。 标题大小来自主题。请在文本编辑器中换标题级别，或用其字号工具。
  • 链接和标题保持原色。 在版块上，有主题色的文本保持原色。请改为在文本元素上设置 Font color。
  • Font color 完全没用。 Primary text color 或 White text 这类 HTML classes 下的颜色类优先级更高。请移除其芯片。
  • 部分文本保持别的颜色。 该部分上的编辑器样式，如 Primary Brand Text，优先级更高。请在文本编辑器中移除该样式。
  • Font size 对计数器没用。 环形计数器和数字计数器有自己的 Font size。请用那个。
  • 色板颜色与品牌不符了。 色板在选择时复制颜色。调色板变更后，请重新选择色板。
  • 品牌颜色未通过对比度检查。 选择其更深的色调。或把文本做到至少 24 px，适用 3 比 1 目标。
  • 照片上文本难读。 对比度太低。请如背景页所示用渐变压暗照片。
  • 按钮失去悬停文字颜色。 您的 Font color 取代了主题悬停色。请也在 Hover style 中设置 Font color。

接下来做什么？

  • HTML ID 与类：通过类复用文本样式，不必逐个元素设置。