如何用JavaScript在不破坏原有顺序的情况下，将自定义字体添加到网页已有字体列表的最前面？

要在不破坏原有顺序的情况下，将自定义字体添加到网页已有字体列表的最前面，可以使用JavaScript来动态修改font-family属性。以下是一个示例代码，展示了如何实现这一功能：

// 假设这是你已有的字体列表
const originalFontFamily = "Arial, sans-serif";

// 这是你想要添加的自定义字体
const customFont = "'CustomFont', Arial, sans-serif";

// 获取body元素的当前字体设置
const body = document.body;
const currentFontFamily = body.style.fontFamily || originalFontFamily;

// 将自定义字体添加到最前面，并保留原有字体列表
const newFontFamily = `${customFont}, ${currentFontFamily}`;

// 应用新的字体设置
body.style.fontFamily = newFontFamily;

解释：

1. originalFontFamily: 这是你网页上已有的字体列表。
2. customFont: 这是你想要添加的自定义字体。注意，自定义字体通常需要用单引号括起来，例如'CustomFont'。
3. body.style.fontFamily: 获取当前body元素的font-family属性值。如果当前没有设置，则使用originalFontFamily作为默认值。
4. newFontFamily: 将自定义字体添加到最前面，并保留原有的字体列表。
5. body.style.fontFamily = newFontFamily: 将新的字体列表应用到body元素上。

注意事项：

• 确保自定义字体已经通过@font-face或其他方式加载到网页中。
• 如果字体列表中有多个字体，确保它们之间用逗号分隔。
• 如果body元素没有直接设置font-family，代码中使用了originalFontFamily作为默认值。你可以根据需要调整这个默认值。

通过这种方式，你可以在不破坏原有字体顺序的情况下，将自定义字体添加到字体列表的最前面。