在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;
登录后复制
本文来自互联网或AI生成，不代表软件指南立场。本站不负任何法律责任。
如若转载请注明出处：http://www.down96.com/tutorials/223.html
