网页字体样式的灵活运用中，我们经常需要调整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在不破坏原有顺序的情况下，将自定义字体添加到网页已有字体列表的最前面？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
570
收藏
