在stylus中优雅地添加自定义字体，避免覆盖原有字体
许多开发者在使用CSS时，需要在现有字体列表中添加自定义字体，而不会覆盖原有字体设置。本文介绍如何使用Stylus和JavaScript实现这一目标，保持代码简洁易维护。
假设网页已设置font-family: -apple-system, BlinkMacSystemFont;，而开发者希望在前面添加自定义字体my-custom（通过@font-face规则定义）。直接覆盖font-family属性会丢失原有字体，因此需要更优雅的方案。
在CSS中直接操作font-family属性较为复杂，需要解析和拼接字符串。更简洁的方法是利用JavaScript获取并修改font-family属性。
以下代码片段演示如何通过JavaScript获取元素的font-family属性，并在其前面添加MyCustom字体：
const el = document.body;
const prevFontFamily = getComputedStyle(el).getPropertyValue('font-family');
el.style.fontFamily = 'MyCustom, ' + prevFontFamily;
代码首先获取document.body元素的计算样式中的font-family值，然后将MyCustom添加到该值的前面，并更新元素的fontFamily样式。 此方法在运行时修改DOM元素样式，而非直接在Stylus中操作CSS。 在Stylus中直接操作需要更复杂的字符串处理，降低代码可读性和可维护性。
