---
title: "FontFamily 扩展"
description: "使用 Font Family 扩展在您的 Tiptap 编辑器中设置自定义字体系列。阅读我们的文档以了解更多信息。"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/functionality/fontfamily"
---

# FontFamily 扩展

使用 Font Family 扩展在您的 Tiptap 编辑器中设置自定义字体系列。阅读我们的文档以了解更多信息。

此扩展使您能够在编辑器中设置字体系列。它使用 [`TextStyle`](https://tiptap.zhcndoc.com/editor/extensions/marks/text-style.md) 标记，渲染一个 `<span>` 标签。字体系列作为内联样式应用，例如 `<span style="font-family: Arial">`。

> **Interactive demo:** [FontFamily](https://embed.tiptap.dev/preview/Extensions/FontFamily)

> **注意！:**
>
> 请注意，`editor.isActive('textStyle', { fontFamily: '字体系列' })` 将返回由 [浏览器的 CSS 规则](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#family-name) 设置的字体系列，而不是您在设置字体系列时预期的结果。

## 安装

```bash
npm install @tiptap/extension-text-style
```

此扩展需要 [`TextStyle`](https://tiptap.zhcndoc.com/editor/extensions/marks/text-style.md) 标记。

```ts
import { Editor } from '@tiptap/core'
import { TextStyle, FontFamily } from '@tiptap/extension-text-style'

new Editor({
  extensions: [TextStyle, FontFamily],
})
```

此扩展默认随 `TextStyleKit` 扩展一起安装，因此您无需单独安装。

```ts
import { Editor } from '@tiptap/core'
import { TextStyleKit } from '@tiptap/extension-text-style'

new Editor({
  extensions: [TextStyleKit],
})
```

## 设置

### types

要应用字体系列属性的标记列表。

默认值： `['textStyle']`

```js
FontFamily.configure({
  types: ['textStyle'],
})
```

## 命令

### setFontFamily()

将给定的字体系列作为内联样式应用。

```js
editor.commands.setFontFamily('Inter')
```

### unsetFontFamily()

移除任何字体系列。

```js
editor.commands.unsetFontFamily()
```

## 源代码

[packages/extension-text-style/src/font-family/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-style/src/font-family)

## 最小安装

```js
import { Editor } from '@tiptap/core'
import { FontFamily } from '@tiptap/extension-text-style/font-family'

new Editor({
  extensions: [FontFamily],
})
```