tinymce 英文字体

### 如何在 TinyMCE 中配置和使用英文字体 TinyMCE 是一个功能强大的富文本编辑器，支持多种字体的自定义配置。以下是如何在 TinyMCE 中设置和使用英文字体的方法。 #### 1. 配置字体选项 通过 `font_family` 参数可以添加或修改可用的字体列表。默认情况下，TinyMCE 提供了一些常用的英文字体。如果需要自定义英文字体，可以在初始化时进行如下配置： ```javascript tinymce.init({ selector: '#mytextarea', font_family_formats: 'Arial=arial,helvetica,sans-serif; Courier New=courier new,courier,monospace; Times New Roman=times new roman,times,serif', toolbar: 'fontselect | fontsizeselect', menubar: false, }); ``` 上述代码中，`font_family_formats` 定义了可用的字体及其对应的 CSS 字体族[^1]。用户可以通过下拉菜单选择这些字体。 #### 2. 设置默认字体 如果希望 TinyMCE 默认使用某种英文字体，可以通过 `content_style` 参数来实现。例如，设置默认字体为 Arial： ```javascript tinymce.init({ selector: '#mytextarea', content_style: "body { font-family: Arial, sans-serif; }", }); ``` 此配置会将编辑器的内容区域默认字体设置为 Arial[^2]。 #### 3. 移除不必要的字体选项 如果不需要显示某些字体选项（如中文或其他语言字体），可以通过调整 `menu` 和 `toolbar` 配置来移除它们。例如： ```javascript tinymce.init({ selector: '#mytextarea', menu: { format: { title: 'Format', items: 'bold italic underline strikethrough | fontsize | forecolor backcolor' } }, toolbar: 'fontselect | fontsizeselect', }); ``` 上述配置去除了与字体族无关的选项，仅保留了英文字体相关的功能[^3]。 #### 4. 引入外部字体 如果需要使用 Google Fonts 或其他外部字体库中的英文字体，可以通过 `content_css` 参数引入相应的样式文件。例如： ```javascript tinymce.init({ selector: '#mytextarea', content_css: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', font_family_formats: 'Roboto=Roboto, sans-serif; Arial=arial,helvetica,sans-serif', }); ``` 这将加载 Roboto 字体并将其添加到可用字体列表中[^1]。 --- ### 注意事项 - 确保所有字体文件均可正常访问，尤其是在跨域环境中。 - 如果需要支持多语言环境，请确保正确配置语言包。 ---