巧妙地将自定义字体添加到网页现有字体列表的首位
在网页设计中，自定义字体至关重要。但如何将新字体优雅地添加到已有的 font-family 属性中，而不破坏原有设置呢？本文提供一种基于 JavaScript 的解决方案，确保自定义字体优先显示。
问题： 假设网页已设置 font-family: -apple-system, BlinkMacSystemFont; 。我们需添加自定义字体 "MyCustom" ，使其成为首选字体，最终效果应为 font-family: MyCustom, -apple-system, BlinkMacSystemFont; 。
解决方案： 利用 JavaScript 动态修改 font-family 属性。我们先获取当前元素的 font-family 值，然后将自定义字体与之拼接，再重新设置该属性。
代码示例：
const element = document.body; // 或其他目标元素
const currentFontFamily = window.getComputedStyle(element).getPropertyValue('font-family');
element.style.fontFamily = `MyCustom, ${currentFontFamily}`;
这段代码首先获取 document.body 元素（或其他指定元素）的 font-family 属性值。然后，使用模板字面量将 "MyCustom" 与原有字体值拼接，并将其赋值给 element.style.fontFamily ，从而将自定义字体置于首位。 请注意，此方法需要在页面加载完成后执行，例如放在 标签的结束之前，或使用 DOMContentLoaded 事件监听器。
其他方法： 对于 Sass 或 Less 等预处理器，则需要采用不同的方法，例如使用变量和字符串操作来动态生成 font-family 属性值。 这需要根据具体的预处理器语法进行调整。
此方法确保了自定义字体的优先级，同时保留了原有的字体回退机制，提供更稳健的用户体验。
