字体名称、字号与文字颜色是 Word 文档中最基础、也最常用的字符级排版属性。统一全文字体、为标题换用更醒目的字体、把关键结论标成醒目的颜色，几乎出现在每一个文档处理需求里。Spire.Doc for JavaScript 基于 WebAssembly 在浏览器端直接完成这些操作，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。

本文介绍两个核心功能点：

• 设置字体
• 修改字体颜色

有关安装和项目配置，请参考 React 项目中集成 Spire.Doc for JavaScript。以下示例默认已安装 Spire.Doc 并完成 WebAssembly 模块初始化。

设置字体

设置字体的核心流程分为三个阶段：首先通过 FetchFileToVFS 将字体文件和目标 Word 文档载入 WASM 虚拟文件系统；然后实例化 Document 加载文档，新建一个 CharacterFormat 对象并设置 FontName 与 FontSize，再遍历目标段落的子对象，对其中类型为 TextRange 的对象调用 ApplyCharacterFormat 应用该格式；最后从 VFS 读取保存后的文件，封装为 Blob 后生成下载链接。

需要留意的是，CharacterFormat 的构造函数必须传入该格式所属的 Document 实例，这是 Spire.Doc 中所有独立格式对象的统一约定。

function App() {
  const SetFont = async () => {
    const docModule = window.wasmModule?.spiredoc;
    if (!docModule) {
      alert('Spire.Doc is not ready yet');
      return;
    }

    // 将字体文件载入 VFS
    await window.spire.FetchFileToVFS("ARIALUNI.TTF", "/Library/Fonts/", `${process.env.PUBLIC_URL}static/font/`);

    // 将目标 Word 文档载入 VFS
    const inputFileName = "SetFont.docx";
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);

    // 创建 Document 实例并加载文档
    const doc = new docModule.Document();
    doc.LoadFromFile(inputFileName);

    // 获取第一节的第 2 个段落
    const p = doc.Sections.get_Item(0).Paragraphs.get_Item(1);

    // 创建 CharacterFormat 并设置字体名称与字号
    const format = new docModule.CharacterFormat(doc);
    format.FontName = "Arial Unicode MS";
    format.FontSize = 16;

    // 遍历段落中的子对象，对文本区域应用字符格式
    for (let i = 0; i < p.ChildObjects.Count; i++) {
      const childObj = p.ChildObjects.get_Item(i);
      if (childObj instanceof docModule.TextRange) {
        childObj.ApplyCharacterFormat(format);
      }
    }

    // 定义输出文件名
    const outputFileName = "SetFont_out.docx";

    // 将文档保存到 VFS
    doc.SaveToFile({ fileName: outputFileName, fileFormat: docModule.FileFormat.Docx2013 });
    doc.Dispose();

    const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>设置Word文档的字体</h1>
      <button onClick={SetFont}>开始</button>
    </div>
  );
}
export default App;

设置字体后生成的文档效果

修改字体颜色

修改字体颜色的核心流程与设置字体一致，区别在于不必再创建独立的 CharacterFormat 对象：颜色是单个属性，直接对 TextRange 自身的 CharacterFormat.TextColor 赋值即可。颜色值取自 Color 提供的预定义属性，其命名与 .NET 的 KnownColor 一致，例如 get_RosyBrown()、get_DarkGreen()；需要精确指定色值时，改用 Color.FromArgb(r, g, b)。

function App() {
  const ChangeFontColor = async () => {
    const docModule = window.wasmModule?.spiredoc;
    if (!docModule) {
      alert('Spire.Doc is not ready yet');
      return;
    }

    // 将目标 Word 文档载入 VFS
    const inputFileName = "ChangeFontColor.docx";
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);

    // 创建 Document 实例并加载文档
    const doc = new docModule.Document();
    doc.LoadFromFile(inputFileName);

    // 获取第一节
    const section = doc.Sections.get_Item(0);

    // 将第 1 个段落中的文字改为玫瑰棕色
    const p1 = section.Paragraphs.get_Item(0);
    for (let i = 0; i < p1.ChildObjects.Count; i++) {
      const childObj = p1.ChildObjects.get_Item(i);
      if (childObj instanceof docModule.TextRange) {
        childObj.CharacterFormat.TextColor = docModule.Color.get_RosyBrown();
      }
    }

    // 将第 2 个段落中的文字改为深绿色
    const p2 = section.Paragraphs.get_Item(1);
    for (let i = 0; i < p2.ChildObjects.Count; i++) {
      const childObj = p2.ChildObjects.get_Item(i);
      if (childObj instanceof docModule.TextRange) {
        childObj.CharacterFormat.TextColor = docModule.Color.get_DarkGreen();
      }
    }

    // 定义输出文件名
    const outputFileName = "ChangeFontColor_out.docx";

    // 将文档保存到 VFS
    doc.SaveToFile({ fileName: outputFileName, fileFormat: docModule.FileFormat.Docx2013 });
    doc.Dispose();

    const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>修改Word文档的字体颜色</h1>
      <button onClick={ChangeFontColor}>开始</button>
    </div>
  );
}
export default App;

修改字体颜色后生成的文档效果

常见问题

只想改段落里的某几个词，不是整段

原因：上面的示例以「段落」为最小处理单位——它遍历段落中的全部子对象，只要命中 TextRange 就无条件赋值，因此一旦某个段落被处理，整段文字都会变成同一种颜色或字体。若要按词处理，需要先定位到目标文本所对应的 TextRange，再单独设置它的字符格式。

解决：用 FindAllString 在文档中查找目标文本，它返回的每个 TextSelection 都能通过 GetAsOneRange() 拿到对应的 TextRange，只改这一处即可：

// 查找文档中所有出现的「关键结论」，参数依次为：查找内容、区分大小写、全字匹配
const selections = doc.FindAllString("关键结论", false, true);

for (let i = 0; i < selections.length; i++) {
  // 只对命中的这一小段文本设置颜色，段落中其余文字不受影响
  selections[i].GetAsOneRange().CharacterFormat.TextColor = docModule.Color.get_Red();
}

若只需要替换第一处，把 FindAllString 换成 FindString 会返回单个 TextSelection 对象。

设置了字体，文档在别的电脑上却显示成别的字体

原因：FontName 只是把字体名称写进文档的字符属性，并不会把字体文件本身带进文档。FetchFileToVFS 载入的字体只服务于本次浏览器端的渲染与度量；当文档在另一台机器上用 Word 打开时，如果该字体没有安装，Word 会按自己的字体替换表回退到其他字体，字号与行距也可能随之变化。

解决：若目标字体是通用字体（如 Arial、Times New Roman），通常无需处理；若必须使用某款特定字体，就要把字体文件随文档一起嵌入，这样在未安装该字体的机器上也能正常显示。具体做法见下一篇文章中的「嵌入私有字体」。

获取免费许可证

如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。