如何用JavaScript在不破坏原有顺序的情况下，将自定义字体添加到网页已有字体列表的最前面？（字体.已有.自定义.如何用.最前面.....）

wufei123 2025-03-13 阅读:65 评论:0

网页字体样式的灵活运用中，我们经常需要调整font-family属性。本文探讨如何利用javascript在已有字体列表中添加自定义字体，且保持原有顺序不变，将自定义字体置于列表首位。假设网页已有字体样式： font-family: -...

如何用JavaScript在不破坏原有顺序的情况下，将自定义字体添加到网页已有字体列表的最前面？

网页字体样式的灵活运用中，我们经常需要调整font-family属性。本文探讨如何利用javascript在已有字体列表中添加自定义字体，且保持原有顺序不变，将自定义字体置于列表首位。

假设网页已有字体样式：

PHP

font-family: -apple-system, BlinkMacSystemFont;

我们希望添加自定义字体my-custom（已通过@font-face声明），使其变为：

PHP

font-family: my-custom, -apple-system, BlinkMacSystemFont;

直接修改CSS可能导致冲突或维护困难。因此，我们需要动态获取和修改字体列表。 Stylus作为预处理器，无法直接操作运行时DOM，所以必须使用JavaScript。

解决方案：通过JavaScript获取元素的font-family属性值，将自定义字体与原有列表拼接，再更新元素的fontFamily属性。以下代码片段演示了这一过程：

PHP

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在不破坏原有顺序的情况下，将自定义字体添加到网页已有字体列表的最前面？的详细内容，更多请关注知识资源分享宝库其它相关文章！