高效添加自定义字体到网页已有字体列表
网页样式设计中，灵活运用字体至关重要。本文介绍如何巧妙地使用JavaScript，在网页已有的字体列表前添加自定义字体，而无需修改原有字体声明。
假设网页已设置font-family属性：
font-family: -apple-system, blinkmacsystemfont;
我们希望引入名为"MyCustom"的自定义字体，并将其置于列表首位，最终效果如下：
立即学习“Java免费学习笔记（深入）”；
font-family: MyCustom, -apple-system, blinkmacsystemfont;
直接用CSS或预处理器难以实现这一目标，因为它们无法直接修改已有的font-family字符串。 但JavaScript可以动态操作页面元素的样式。
一种有效方法是：先获取元素的font-family值，再将自定义字体与之拼接。 以下JavaScript代码展示了这个过程：
const el = document.body; // 或其他目标元素
const prevFontFamily = window.getComputedStyle(el).fontFamily;
el.style.fontFamily = `MyCustom, ${prevFontFamily}`;这段代码获取document.body元素（或其他指定元素）的font-family属性值，然后将"MyCustom"添加到其前面。 注意，这需要在页面加载完成后执行，才能生效。 如果需要应用于所有元素，则需遍历所有元素并执行此操作。 使用模板字面量(``)可以更清晰地进行字符串拼接。
这种方法避免了直接修改CSS，保持了CSS代码的简洁性，并通过JavaScript提供了一种灵活的字体管理方式。
以上就是如何用JavaScript高效地在网页已有字体列表前添加自定义字体？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
550
收藏
