网页字体样式的灵活运用中，我们经常需要调整font-family属性。本文探讨如何利用javascript在已有字体列表中添加自定义字体，且保持原有顺序不变，将自定义字体置于列表首位。

假设网页已有字体样式：

font-family: -apple-system, BlinkMacSystemFont;

我们希望添加自定义字体my-custom（已通过@font-face声明），使其变为：

font-family: my-custom, -apple-system, BlinkMacSystemFont;

直接修改CSS可能导致冲突或维护困难。因此，我们需要动态获取和修改字体列表。 Stylus作为预处理器，无法直接操作运行时DOM，所以必须使用JavaScript。

解决方案：通过JavaScript获取元素的font-family属性值，将自定义字体与原有列表拼接，再更新元素的fontFamily属性。 以下代码片段演示了这一过程：

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

const prevFontFamily = getComputedStyle(el).getPropertyValue('font-family');
el.style.fontFamily = `my-custom, ${prevFontFamily}`;

这段代码获取document.body元素的font-family值，将my-custom添加到开头，并更新元素的fontFamily属性。 注意，此方法修改的是document.body的字体，如需应用于其他元素，需修改el选择器。 my-custom需预先通过@font-face声明定义。 使用模板字面量（backticks）可以更清晰地进行字符串拼接。