如何在Stylus中优雅地添加自定义字体而不覆盖原有字体？（字体.而不.自定义.优雅.覆盖.....）

wufei123 2025-03-13 阅读:1 评论:0

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

在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中直接操作需要更复杂的字符串处理，降低代码可读性和可维护性。

如何在Stylus中优雅地添加自定义字体而不覆盖原有字体？