字体系列、大小和颜色

字体功能允许您更改字体系列、大小和颜色（包括背景颜色）。

# 演示

使用下面演示中的工具栏下拉菜单来控制字体大小和字体系列。您还可以更改字体颜色和字体背景颜色，使用预定义调色板或颜色选择器。

您想要传达的信息是任何文档最重要的部分。但是您如何做到这一点也起着很大的作用。字体、大小和颜色可能会从根本上改变读者对您内容的感知方式。

无衬线字体，如 Arial 或 Verdana，普遍用于旨在在屏幕上阅读的电子出版物。

衬线字体系列传统上用于印刷媒体，使从纸上阅读更容易。基本的印刷文本是白底黑字，但现代印刷技术和电子媒体为文档中更多样化的颜色留出了空间。

等宽字体，如 Courier，与计算机终端相关联，通常用于表示代码列表和机器打印输出。

字体颜色和背景颜色用于将注意力吸引到文本的某些部分。但是，您应该谨慎使用它们，因为类似的颜色可能会导致不可读的结果。然而，一个经过精心选择的集合将极大地改善文本可见性和可读性，并且可以用来帮助无障碍性。

您可以使用自定义文本和背景颜色来创建信息框或引文。

文本大小在引导读者注意力方面也起着重要作用。

大文本用于需要真正突出显示的重要信息。

小文本可以提供一些可选细节。您也可以将其用于您不想过多公开的信息。

此演示展示了一组有限的功能。访问功能丰富的编辑器示例以查看更多实际操作。

# 附加功能信息

字体样式与基本文本样式一样，可以满足多种用途。您可以全局应用字体大小设置，或将其应用于文本的选定部分，以使其引起读者的注意。使用不同的字体系列可以帮助区分具有不同目的的内容部分（例如，正文和侧边引文或回顾）。不同的字体颜色可以作为标记和指南，就像字体背景颜色一样，更突出，更能吸引眼球。

该插件在富文本编辑器中启用了以下功能

FontFamily – 通过应用带有 font-family 的内联  元素（在 style 属性中），更改字体系列。
FontSize – 通过应用内联  元素来控制字体大小，这些元素要么具有 CSS 类，要么在 style 属性中具有 font-size。
FontColor – 通过应用带有 color 的内联  元素（在 style 属性中），来控制字体颜色。
FontBackgroundColor – 通过应用带有 background-color 的内联  元素（在 style 属性中），来控制字体背景颜色。

您可以使用移除格式功能删除所有字体格式。

# 安装

⚠️ 新的导入路径

从 42.0.0 版本开始，我们更改了导入路径的格式。本指南使用新的、更短的格式。如果您使用的是旧版本的 CKEditor 5，请参阅旧版设置中的包指南。

在安装编辑器之后，将该功能添加到您的插件列表和工具栏配置中

import { ClassicEditor, Font } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Font, /* ... */ ],
        toolbar: [ 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', /* ... */ ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

您也可以只将一个或几个字体功能添加到您的插件列表和工具栏配置中

import { ClassicEditor, FontFamily } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ FontFamily, /* ... */ ],
        toolbar: [ 'fontFamily', /* ... */ ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 配置字体系列功能

您可以配置 WYSIWYG 编辑器支持哪些字体系列选项。使用 config.fontFamily.options 配置选项来实现。

使用特殊的 'default' 关键字来使用网页样式中定义的默认字体系列。它会删除任何自定义字体系列。

例如，以下编辑器除了默认字体系列之外，还支持两种字体系列

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        fontFamily: {
            options: [
                'default',
                'Ubuntu, Arial, sans-serif',
                'Ubuntu Mono, Courier New, Courier, monospace'
            ]
        },
        toolbar: [
            'heading', 'bulletedList', 'numberedList', 'fontFamily', 'undo', 'redo'
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

此文本的字体系列设置为“Ubuntu, Arial, sans-serif”。

此文本的字体系列设置为“Ubuntu Mono, Courier New, Courier, monospace”。

# 接受所有字体名称

默认情况下，所有未在 config.fontFamily.options 中指定的 font-family 值都会被删除。您可以使用 config.fontFamily.supportAllValues 选项来启用对所有字体名称的支持。

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        fontFamily: {
            options: [
                // Font family configuration options are described in the "Configuring the font family feature" section.
                // ...
            ],
            supportAllValues: true
        },
        // More of editor's configuration.
        // ...
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 配置字体大小功能

可以配置 WYSIWYG 编辑器支持哪些字体大小选项。使用 config.fontSize.options 配置选项来实现。

使用特殊的 'default' 关键字来使用网页样式中定义的默认字体大小。它会删除任何自定义字体大小。

字体大小功能支持两种定义配置的方法：使用预定义（命名）预设或简单的数值。

# 使用预定义预设

字体大小功能定义了 4 个命名预设

'tiny'
'small'
'big'
'huge'

每个大小在视图中表示为带有 text-* 类的  元素。例如，'tiny' 预设在编辑器数据中如下所示

<span class="text-tiny">...</span>

这些类（预设）的 CSS 定义必须包含在渲染编辑内容的网页样式中。

以下是一个字体大小 CSS 类的示例

.ck-content .text-tiny {
    font-size: 0.7em;
}

.ck-content .text-small {
    font-size: 0.85em;
}

.ck-content .text-big {
    font-size: 1.4em;
}

.ck-content .text-huge {
    font-size: 1.8em;
}

支持两种字体大小的编辑器的示例

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        fontSize: {
            options: [
                'tiny',
                'default',
                'big'
            ]
        },
        toolbar: [
            'heading', 'bulletedList', 'numberedList', 'fontSize', 'undo', 'redo'
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

这是一个具有不同字体大小的混合文本：小号和大号。

# 使用数值

字体大小功能也支持数值。

在这种情况下，每个大小在视图中表示为带有 font-size 样式（以 px 为单位）的  元素。例如，14 将在编辑器数据中表示为

<span style="font-size: 14px">...</span>

以下是一个支持数值字体大小的 WYSIWYG 编辑器的示例。请注意，'default' 由网页的默认样式控制

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        fontSize: {
            options: [
                9,
                11,
                13,
                'default',
                17,
                19,
                21
            ]
        },
        toolbar: [
            'heading', 'bulletedList', 'numberedList', 'fontSize', 'undo', 'redo'
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

9px

11px

13px

正常

17px

19px

21px

# 接受所有字体大小

默认情况下，所有未在 config.fontSize.options 中指定的 font-size 值都会被删除。您可以使用 config.fontSize.supportAllValues 选项来启用对所有字体大小的支持。

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        fontSize: {
            options: [
                // Numerical values.
                // ...
            ],
            supportAllValues: true
        },
        // More of editor's configuration.
        // ...
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

此选项只能与数值结合使用。

# 配置字体颜色和字体背景颜色功能

字体颜色和字体背景颜色功能都是可配置的，并且共享相同的配置格式。

请注意，字体颜色和字体背景颜色是独立的插件。它们必须分别启用和配置。

请查看下面的 WYSIWYG 编辑器，其中这两个功能使用编辑器配置进行了自定义

文本在这个示例中 multiple 字体颜色和字体背景颜色。

以下是一些示例，其中包含自定义颜色，这些颜色未在配置中定义，但可能在 "文档颜色" 部分中被识别和使用。

# 指定可用颜色

可以配置颜色下拉菜单中可用的颜色。使用 config.fontColor.colors 和 config.fontBackgroundColor.colors 配置选项来实现。

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        fontColor: {
            colors: [
                {
                    color: 'hsl(0, 0%, 0%)',
                    label: 'Black'
                },
                {
                    color: 'hsl(0, 0%, 30%)',
                    label: 'Dim grey'
                },
                {
                    color: 'hsl(0, 0%, 60%)',
                    label: 'Grey'
                },
                {
                    color: 'hsl(0, 0%, 90%)',
                    label: 'Light grey'
                },
                {
                    color: 'hsl(0, 0%, 100%)',
                    label: 'White',
                    hasBorder: true
                },
                // More colors.
                // ...
            ]
        },
        fontBackgroundColor: {
            colors: [
                {
                    color: 'hsl(0, 75%, 60%)',
                    label: 'Red'
                },
                {
                    color: 'hsl(30, 75%, 60%)',
                    label: 'Orange'
                },
                {
                    color: 'hsl(60, 75%, 60%)',
                    label: 'Yellow'
                },
                {
                    color: 'hsl(90, 75%, 60%)',
                    label: 'Light green'
                },
                {
                    color: 'hsl(120, 75%, 60%)',
                    label: 'Green'
                },
                // More colors.
                // ...
            ]
        },
        toolbar: [
            'heading', 'bulletedList', 'numberedList', 'fontColor', 'fontBackgroundColor', 'undo', 'redo'
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 更改颜色网格的几何形状

您可以通过设置 config.fontColor.columns 和 config.fontBackgroundColor.columns 配置选项来配置颜色下拉菜单中的列数。

通常，您会在更改可用颜色的数量时使用此选项。

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        fontColor: {
            colors: [
                // 9 colors defined here.
                // ...
            ]

            columns: 3, // So, you can display them in 3 columns.

            // Optional configuration of the number of document colors.
            // ...
        },
        fontBackgroundColor: {
            columns: 6,
            // Background color options.
            // ...
        },
        toolbar: [
            'heading', 'bulletedList', 'numberedList', 'fontColor', 'fontBackgroundColor', 'undo', 'redo'
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 文档颜色

字体和字体背景颜色下拉菜单包含“文档颜色”部分。它列出了文档中已经使用的颜色，以便用户能够轻松地重复使用它们（出于一致性目的）。

默认情况下，显示的文档颜色数量限制为一行，但您可以使用 config.fontColor.documentColors 或 config.fontBackgroundColor.documentColors 选项来调整它（或删除整个部分）。

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        fontColor: {
            // Display 6 columns in the color grid.
            columns: 6,

            // And 12 document colors (2 rows of them).
            documentColors: 12,

            // Optional available font colors configuration.
            // ...
        },
        fontBackgroundColor: {
            // Remove the "Document colors" section.
            documentColors: 0,

            // Background color options.
            // ...
        },
        toolbar: [
            'heading', 'bulletedList', 'numberedList', 'fontColor', 'fontBackgroundColor', 'undo', 'redo'
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 颜色选择器

您可以使用颜色选择下拉菜单底部提供的“颜色选择器”选项来设置不在预配置调色板中的颜色。

颜色选择器以 HSL 格式应用颜色，因为它是字体颜色功能的默认格式。您可以使用 config.fontColor.colorPicker.format 选项更改此格式。可用的颜色格式在 ColorPickerOutputFormat 类型中定义。此更改不会影响颜色输入——它始终只接受以 hex 格式（开头有或没有 # 符号）给出的值。

要完全关闭给定功能的颜色选择器，请将 config.fontColor.colorPicker（或 config.fontBackgroundColor.colorPicker）选项设置为 false。

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        fontColor: {
            colorPicker: {
                // Use 'hex' format for output instead of 'hsl'.
                format: 'hex'
            }
        },
        fontBackgroundColor: {
            // Do not display the color picker.
            colorPicker: false
        },
        toolbar: [
            'heading', 'bulletedList', 'numberedList', 'fontColor', 'fontBackgroundColor', 'undo', 'redo'
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

以下是一些可以帮助您格式化内容的 CKEditor 5 功能

基本文本样式 – 必需元素，例如粗体、斜体等。
样式 – 将预配置的样式应用于编辑器内容中的现有元素。
文本对齐 – 因为内容是左对齐、右对齐、居中还是两端对齐很重要。
大小写更改 – 将文本片段或块更改为大写、小写或首字母大写。
标题 – 将内容分成多个部分。
突出显示 – 标记重要的单词和段落，帮助审查或突出显示内容的特定部分。
格式刷 – 轻松复制文本格式并将其应用于编辑文档中的不同位置。
移除格式 – 轻松清除基本文本格式。

# 通用 API

The FontFamily 插件注册了以下组件

'fontFamily' 下拉菜单。
The 'fontFamily' 命令。

选项的数量及其名称对应于 config.fontFamily.options 配置选项。

您可以通过使用所需的值执行命令来更改当前选择的字体系列
```
editor.execute( 'fontFamily', { value: 'Arial' } );
```
value 必须与配置字符串中的第一个字体名称相对应。对于以下默认配置
```
fontFamily.options = [
    'default',
    'Arial, Helvetica, sans-serif',
    'Courier New, Courier, monospace',
    'Georgia, serif',
    'Lucida Sans Unicode, Lucida Grande, sans-serif',
    'Tahoma, Geneva, sans-serif',
    'Times New Roman, Times, serif',
    'Trebuchet MS, Helvetica, sans-serif',
    'Verdana, Geneva, sans-serif'
]
```
'fontFamily' 命令将接受相应的字符串作为值
- 'Arial'
- 'Courier New'
- 'Georgia'
- 'Lucida Sans Unicode'
- 'Tahoma'
- 'Times New Roman'
- 'Trebuchet MS'
- 'Verdana'
请注意，传递空值将从选择中删除 fontFamily 属性（default）
```
editor.execute( 'fontFamily' );
```

FontSize 插件注册以下组件

'fontSize' 下拉菜单。
'fontSize' 命令。

选项数量及其名称对应于 config.fontSize.options 配置选项。

您可以通过使用所需的值执行命令来更改当前选择的字体大小
```
// For numerical values:
editor.execute( 'fontSize', { value: 10 } );

// For named presets:
editor.execute( 'fontSize', { value: 'small' } );
```
传递空值将删除任何设置的 config.fontSize
```
editor.execute( 'fontSize' );
```

FontColor 插件注册以下组件

'fontColor' 下拉菜单。
'fontColor' 命令。

您可以通过使用所需的值执行命令来更改当前选择的字体颜色
```
editor.execute( 'fontColor', { value: 'rgb(30, 188, 97)' } );
```
传递空值将从选择中删除字体颜色
```
editor.execute( 'fontColor' );
```

FontBackgroundColor 插件注册以下组件

'fontBackgroundColor' 下拉菜单。
'fontBackgroundColor' 命令。

您可以通过使用所需的值执行命令来更改当前选择的字体背景颜色
```
editor.execute( 'fontBackgroundColor', { value: 'rgb(30, 188, 97)' } );
```
传递空值将从选择中删除字体背景颜色
```
editor.execute( 'fontBackgroundColor' );
```

我们建议使用官方的 CKEditor 5 检查器进行开发和调试。它将提供大量有关编辑器状态的有用信息，例如内部数据结构、选择、命令等等。

# 内容兼容性

Font 插件提供了对已弃用的  标签的基本支持。

虽然始终支持 ，但要使用  和 ，您需要分别启用 config.fontFamily.supportAllValues 和 config.fontSize.supportAllValues 选项。

使用  格式化的文本将被插件接受，但编辑器始终以现代格式返回标记，因此转换是单向的。

# 贡献

该功能的源代码可在 GitHub 上获得，地址为 https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-font。

我们每天都在努力使我们的文档保持完整。您是否发现过时信息？是否缺少某些内容？请通过我们的问题跟踪器报告。

随着 42.0.0 版本的发布，我们已经重写了大部分文档以反映新的导入路径和功能。感谢您的反馈，这将帮助我们确保文档的准确性和完整性。

字体系列、大小和颜色

# 演示

# 附加功能信息

# 安装

# 配置字体系列功能

# 接受所有字体名称

# 配置字体大小功能

# 使用预定义预设

# 使用数值

# 接受所有字体大小

# 配置字体颜色和字体背景颜色功能

# 指定可用颜色

# 更改颜色网格的几何形状

# 文档颜色

# 颜色选择器

# 相关功能

# 通用 API

# 内容兼容性

# 贡献