Blazor中为SfDocumentEditorContainer字体下拉菜单添加自定义字体问题

针对你遇到的字体下拉菜单始终加载默认字体的问题，结合Syncfusion 20.3.0.47版本的特性，可通过以下步骤解决：

1. 核心问题原因 #

在20.3.x版本中，DocumentEditorSettings.FontFamilies仅控制文档编辑器内核支持的字体渲染，工具栏的字体下拉列表不会自动同步该配置，默认会加载内置字体集合，因此需要手动覆盖工具栏选项。

2. 代码修改方案 #

在Created事件中手动更新工具栏的字体下拉选项，同时确保字体在客户端可访问：

步骤1：引入自定义字体（非系统字体需执行） #

在页面的<head>标签中添加web字体引用（以Algerian为例）：

<link href="https://fonts.googleapis.com/css2?family=Algerian&display=swap" rel="stylesheet">

步骤2：更新组件代码 #

<SfDocumentEditorContainer @ref="container" Height="580px" Width="1300px" EnableToolbar="true" EnableRtl=true DocumentEditorSettings="EditorSettings" >    
    <DocumentEditorContainerEvents Created="OnCreated" DocumentChanged="OnDocumentChange" ></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>

@code {
    internal string DocumentName { get; set; }
    SfDocumentEditorContainer container;
    DocumentEditorSettingsModel EditorSettings = new DocumentEditorSettingsModel() { 
        FontFamilies= new string[3] { "Algerian", "Arial","Tahoma" } 
    };

    private void OnCreated(object args)
    {
        // 定位工具栏中的字体下拉按钮
        var fontDropdownItem = container.Toolbar.Items.FirstOrDefault(item => item.Id == "FontFamily") as DropDownButtonItemModel;
        if (fontDropdownItem != null)
        {
            // 清空默认字体列表，替换为自定义字体
            fontDropdownItem.Items.Clear();
            foreach (var font in EditorSettings.FontFamilies)
            {
                fontDropdownItem.Items.Add(new DropDownMenuItemModel { Text = font, Id = font });
            }
            // 刷新工具栏使更改生效
            container.Toolbar.RefreshToolbar();
        }
    }
}

3. 验证要点 #

• 确保自定义字体名称与引入的字体名称完全一致（区分大小写）
• 若使用系统自带字体，可跳过字体引入步骤，但需确认客户端系统已安装该字体
• 执行代码后，工具栏字体下拉列表将显示你配置的自定义字体，同时文档编辑器可正确渲染对应字体内容

内容的提问来源于stack exchange，提问作者Hassan Cheraghali