在翻译过程中，需要特别注意保持所有 Markdown 语法和标签的完整性，不改变 HTML 标签的功能，以确保翻译后的内容不影响任何语法或标签的呈现。请遵循以下规则进行翻译：
-
识别和翻译文本内容：只识别和翻译 Markdown 中的纯文本内容，包括标题、段落和列表项中的文本。
-
保留标签和属性：遇到 HTML 标签（如、
-
特殊语法处理：对于 Markdown 特定的语法（如链接、图像标签），只翻译描述性文本部分（如 alt 文本），不改变链接或语法结构。
-
保持格式不变：确保所有 Markdown 格式（如粗体、斜体、代码块）在翻译过程中保持不变。
-
你的任务是确保翻译内容既准确又不破坏原始的 Markdown 结构和 HTML 标签的功能。请在翻译过程中仔细检查，以确保语法和标签的正确呈现。
-
你只能返回翻译后的文本，不能返回其他内容。
将以下文本翻译为繁体中文：
制作可視化大屏時，字體的引入是一個重要的功能，不僅是可視化項目，關於設計類的項目都會涉及到大量的第三方字體引用
在字體加載時，chrome 會隱藏未加載字體的文本 3s，如果仍未加載，那麼將會回退使用系統字體。直到加載後才進行替換，而 safari 將會一直隱藏文本，直到字體文件加載完成，這在大多數網絡環境較好時沒有問題，但是當網絡延遲時，會出現 FOIL 也就是閃爍不可見文本
為了解決這個問題，我們要做兩件事#
- 立即顯示回退文本，沒有字體總比空白等待要好
- 批量加載和緩存字體，項目通常設計十幾二十種字體文件，如果緩存到本地，體驗是最好的
/* Before */
@font-face {
font-family: Helvetica;
}
/* After */
@font-face {
font-family: Helvetica;
font-display: swap;
}
font-display 是一個指定字體顯示策略的屬性
font-display: auto; // 自定義
font-display: block; // 短暫阻塞和無限的交換周期
font-display: swap; // 超小阻塞和無限交換周期
font-display: fallback; // 超小阻塞和短暫交換周期
font-display: optional; // 超小阻塞和沒有交換周期
將 font-display 指定為 swap 時，會在當前系統沒有這個字體的時候立即使用默認字體替換，並且當字體加載完成時替換
到這裡我們就避免了無文本的問題
解決多字體加載問題#
我們可以在項目加載時，或者用戶無操作時將多字體加載到本地，這時需要用到 js 加載，這可以精確的控制我們的加載行為
// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");
// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);
// Load the
fontfont.load();
// Wait until the fonts are all
loadeddocument.fonts.ready.then(() => { // Update the CSS to use the fonts});
document.fonts 會保存有當前可用的字體，你可以使用 forEach 來查看當前的所有可用字體
![[Pasted image 20240216110208.png]]
這裡還有一個 4.2k star 的開源庫做了這個功能，允許你做更精細的控制
fontfaceobserver
我的推薦是，將項目的字體分成幾類，本地字體不加載，第三方字體可以存在數據庫中，前端項目只需要寫一個字體加載器，比對本地字體和全量字體，進行加載。
當前可視化面板已經使用的字體可以單獨存儲到當前 dashboard 信息中，來實現對外發布僅加載已使用字體