hypercross
/
ttrpg-tools
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: remove words prop from md-emfont 

Removes the `words` property from `EmfontProps` and simplifies the
URL construction by removing the font subsetting logic.
This commit is contained in:
hypercross 2026-05-11 11:56:22 +08:00
parent 4038d67ea0
commit a19d848456
1 changed files with 34 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/md-emfont.tsx
View File

@ -3,57 +3,51 @@ import { createEffect, onCleanup } from "solid-js";
export interface EmfontProps {
weight?: string;
words?: string;
}
customElement(
"md-emfont",
{ weight: "400", words: "" },
(props, { element }) => {
noShadowDOM();
customElement("md-emfont", { weight: "400" }, (props, { element }) => {
noShadowDOM();
// 从 element 的 textContent 获取字体名称
const font = element?.textContent?.trim() || "";
// 从 element 的 textContent 获取字体名称
const font = element?.textContent?.trim() || "";
// 隐藏原始文本内容
if (element) {
element.textContent = "";
}
// 隐藏原始文本内容
if (element) {
element.textContent = "";
}
// 从父节点 article 获取当前 article 元素
const articleEl = element?.closest("article") as HTMLElement;
// 从父节点 article 获取当前 article 元素
const articleEl = element?.closest("article") as HTMLElement;
// 构建 emfont CSS URL
const weight = props.weight || "400";
// 从 article 文本内容中提取唯一字符作为 words，用于字体子集化
const words =
props.words || [...new Set(articleEl?.textContent || "")].join("");
const linkHref = `https://font.emtech.cc/css/${font}?weight=${weight}&words=${encodeURIComponent(words)}`;
// 构建 emfont CSS URL
const weight = props.weight || "400";
const linkHref = `https://font.emtech.cc/css/${font}?weight=${weight}`;
// 创建 <link> 元素并注入 <head>
const linkEl = document.createElement("link");
// 避免重复加载：检查是否已有相同字体的 <link>
let linkEl = document.head.querySelector(
`link[data-md-emfont="${font}"]`,
) as HTMLLinkElement | null;
if (!linkEl) {
linkEl = document.createElement("link");
linkEl.rel = "stylesheet";
linkEl.href = linkHref;
linkEl.dataset.mdEmfont = font;
document.head.appendChild(linkEl);
}
createEffect(() => {
if (!articleEl) return;
articleEl.dataset.mdEmfont = font;
articleEl.style.fontFamily = font;
});
createEffect(() => {
if (!articleEl) return;
articleEl.dataset.mdEmfont = font;
articleEl.style.fontFamily = font;
});
onCleanup(() => {
// 清理 article 上的样式
if (articleEl?.dataset?.mdEmfont === font) {
articleEl.style.fontFamily = "";
}
// 移除注入的 <link>
if (linkEl.parentNode) {
linkEl.parentNode.removeChild(linkEl);
}
});
onCleanup(() => {
// 清理 article 上的样式
if (articleEl?.dataset?.mdEmfont === font) {
delete articleEl.dataset.mdEmFont;
}
});
return null;
},
);
return null;
});