在stylus中优雅地添加自定义字体，避免覆盖原有字体

许多开发者在使用CSS时，需要在现有字体列表中添加自定义字体，而不会覆盖原有字体设置。本文介绍如何使用Stylus和JavaScript实现这一目标，保持代码简洁易维护。

假设网页已设置font-family: -apple-system, BlinkMacSystemFont;，而开发者希望在前面添加自定义字体my-custom（通过@font-face规则定义）。直接覆盖font-family属性会丢失原有字体，因此需要更优雅的方案。

在CSS中直接操作font-family属性较为复杂，需要解析和拼接字符串。更简洁的方法是利用JavaScript获取并修改font-family属性。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

以下代码片段演示如何通过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中直接操作需要更复杂的字符串处理，降低代码可读性和可维护性。