网页字体样式的灵活运用中，我们经常需要调整font-family属性。本文探讨如何利用javascript在已有字体列表中添加自定义字体，且保持原有顺序不变，将自定义字体置于列表首位。
假设网页已有字体样式：
font-family: -apple-system, BlinkMacSystemFont;
登录后复制
我们希望添加自定义字体my-custom（已通过@font-face声明），使其变为：
font-family: my-custom, -apple-system, BlinkMacSystemFont;
登录后复制
直接修改CSS可能导致冲突或维护困难。因此，我们需要动态获取和修改字体列表。 Stylus作为预处理器，无法直接操作运行时DOM，所以必须使用JavaScript。
解决方案：通过JavaScript获取元素的font-family属性值，将自定义字体与原有列表拼接，再更新元素的fontFamily属性。 以下代码片段演示了这一过程：
立即学习“Java免费学习笔记（深入）”；
const el = document.body; // 或其他目标元素const prevFontFamily = getComputedStyle(el).getPropertyValue('font-family');el.style.fontFamily = `my-custom, ${prevFontFamily}`;
登录后复制
这段代码获取document.body元素的font-family值，将my-custom添加到开头，并更新元素的fontFamily属性。 注意，此方法修改的是document.body的字体，如需应用于其他元素，需修改el选择器。 my-custom需预先通过@font-face声明定义。 使用模板字面量（backticks）可以更清晰地进行字符串拼接。
以上就是如何用JavaScript在不破坏原有顺序的情况下，将自定义字体添加到网页已有字体列表的最前面？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2791731.html
