高效添加自定义字体到网页已有字体列表

网页样式设计中，灵活运用字体至关重要。本文介绍如何巧妙地使用JavaScript，在网页已有的字体列表前添加自定义字体，而无需修改原有字体声明。

假设网页已设置font-family属性：

font-family: -apple-system, blinkmacsystemfont;

我们希望引入名为"MyCustom"的自定义字体，并将其置于列表首位，最终效果如下：

立即学习“Java免费学习笔记（深入）”；

Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

font-family: MyCustom, -apple-system, blinkmacsystemfont;

直接用CSS或预处理器难以实现这一目标，因为它们无法直接修改已有的font-family字符串。 但JavaScript可以动态操作页面元素的样式。

一种有效方法是：先获取元素的font-family值，再将自定义字体与之拼接。 以下JavaScript代码展示了这个过程：

const el = document.body; // 或其他目标元素

const prevFontFamily = window.getComputedStyle(el).fontFamily;
el.style.fontFamily = `MyCustom, ${prevFontFamily}`;

这段代码获取document.body元素（或其他指定元素）的font-family属性值，然后将"MyCustom"添加到其前面。 注意，这需要在页面加载完成后执行，才能生效。 如果需要应用于所有元素，则需遍历所有元素并执行此操作。 使用模板字面量(``)可以更清晰地进行字符串拼接。

这种方法避免了直接修改CSS，保持了CSS代码的简洁性，并通过JavaScript提供了一种灵活的字体管理方式。