---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/typography'
title: '调整文本大小与颜色 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T13:53:23+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  把导语句放大，用品牌颜色排引文，或在深色照片上用白色标题。用 Style 面板中的 Font size 和 Font color，一次改变一个元素的全部文本。只改一段文本的一部分，请改用文本编辑器的工具栏。全站共用的大小和颜色请用主题设置。
  本视频按下面的配方操作：把一句话做成大字号品牌色的导语。
tags:
  - 'Style your elements'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 调整文本大小与颜色
      description: |-
        把导语句放大，用品牌颜色排引文，或在深色照片上用白色标题。用 Style 面板中的 Font size 和 Font color，一次改变一个元素的全部文本。只改一段文本的一部分，请改用文本编辑器的工具栏。全站共用的大小和颜色请用主题设置。
        本视频按下面的配方操作：把一句话做成大字号品牌色的导语。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T13:53:23+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/typography'
      articleSection: 设置元素样式
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/typography'
      description: |-
        把导语句放大，用品牌颜色排引文，或在深色照片上用白色标题。用 Style 面板中的 Font size 和 Font color，一次改变一个元素的全部文本。只改一段文本的一部分，请改用文本编辑器的工具栏。全站共用的大小和颜色请用主题设置。
        本视频按下面的配方操作：把一句话做成大字号品牌色的导语。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[搭建页面](/zh-hans/hc/documentation/learn-dxpr-builder/build) /[设置元素样式](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings) # 调整文本大小与颜色.

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

   ## 本指南内容

 相关指南

- [链接到版块并用类复用样式](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/custom-css)

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

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

  ## 开始之前

- 在 DXPR Builder 中打开页面；指向元素即显示带 **More** 的控制栏。刚接触构建器？请参阅[您的第一页](/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/first-page)。
- **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**。

## 您会看到的内容

句子变为 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](https://webaim.org/resources/contrastchecker/)。

## 如果看不到效果

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

## 接下来做什么？

- [HTML ID 与类](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/custom-css)：通过类复用文本样式，不必逐个元素设置。