[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-optimization":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-optimization":1223,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-optimization":1249},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":14,"pinned":15,"draft":15,"body":16,"seo":1219,"stem":1220,"id":1221,"extension":1222},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-optimization","字体优化策略","Web 字体（@font-face）常是首屏体积与 LCP 的大头，尤其中文字库。策略不当会出现文字长时间不可见（FOIT）、回退字体与 Web 字体切换导致布局跳动（FOUT\u002FCLS）。本文与 排版与文本 中的 Web 字体概要衔接。","技能小册",[12,13],"css","fonts","2021-04-23",false,{"type":17,"value":18,"toc":1197},"minimark",[19,22,37,46,50,108,114,125,197,301,309,316,447,461,628,645,649,656,741,760,771,775,779,834,838,845,900,906,920,923,926,929,940,943,996,1000,1033,1036,1056,1059,1091,1094,1097,1193],[20,21,8],"h1",{"id":8},[23,24,25,26,30,31,36],"p",{},"Web 字体（",[27,28,29],"code",{},"@font-face","）常是首屏体积与 LCP 的大头，尤其中文字库。策略不当会出现文字长时间不可见（FOIT）、回退字体与 Web 字体切换导致布局跳动（FOUT\u002FCLS）。本文与 ",[32,33,35],"a",{"href":34},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Flayout-text","排版与文本"," 中的 Web 字体概要衔接。",[23,38,39,40],{},"演示（需登录）：",[32,41,45],{"href":42,"rel":43},"https:\u002F\u002Fwangxiaoze.cn\u002Fweb-admin\u002F#\u002Fother\u002Fbusiness\u002Ffont-loading",[44],"nofollow","字体加载 Demo",[47,48,49],"h2",{"id":49},"优化目标",[51,52,53,66],"table",{},[54,55,56],"thead",{},[57,58,59,63],"tr",{},[60,61,62],"th",{},"问题",[60,64,65],{},"对策",[67,68,69,78,92],"tbody",{},[57,70,71,75],{},[72,73,74],"td",{},"文件过大",[72,76,77],{},"子集化、WOFF2、变量字体按需",[57,79,80,83],{},[72,81,82],{},"加载阻塞",[72,84,85,88,89],{},[27,86,87],{},"font-display","、preload、避免 ",[27,90,91],{},"@import",[57,93,94,97],{},[72,95,96],{},"切换抖动",[72,98,99,100,103,104,107],{},"回退栈、",[27,101,102],{},"font-size-adjust","、",[27,105,106],{},"size-adjust","（@font-face）",[47,109,111,113],{"id":110},"font-display加载时间轴",[27,112,87],{},"（加载时间轴）",[23,115,116,117,119,120,124],{},"写在 ",[27,118,29],{}," 内，控制",[121,122,123],"strong",{},"阻塞期 \u002F 交换期 \u002F 失败期","的渲染策略：",[51,126,127,137],{},[54,128,129],{},[57,130,131,134],{},[60,132,133],{},"值",[60,135,136],{},"行为概要",[67,138,139,149,159,173,183],{},[57,140,141,146],{},[72,142,143],{},[27,144,145],{},"auto",[72,147,148],{},"由浏览器决定（常偏阻塞）",[57,150,151,156],{},[72,152,153],{},[27,154,155],{},"block",[72,157,158],{},"短阻塞 + 长交换（可能 FOIT）",[57,160,161,166],{},[72,162,163],{},[27,164,165],{},"swap",[72,167,168,169,172],{},"极短阻塞 + 长交换；",[121,170,171],{},"文字尽快可见","，可能 FOUT（正文常用）",[57,174,175,180],{},[72,176,177],{},[27,178,179],{},"fallback",[72,181,182],{},"极短阻塞 + 短交换，超时则放弃 Web 字体",[57,184,185,190],{},[72,186,187],{},[27,188,189],{},"optional",[72,191,192,193,196],{},"极短阻塞、",[121,194,195],{},"无交换","；未赶上则整页用回退字体（装饰字体）",[198,199,203],"pre",{"className":200,"code":201,"language":12,"meta":202,"style":202},"language-css shiki shiki-themes material-theme-lighter github-light github-dark","@font-face {\n    font-family: \"MyFont\";\n    src: url(\"\u002Ffonts\u002Fmy.woff2\") format(\"woff2\");\n    font-display: swap;\n}\n","",[27,204,205,217,241,281,295],{"__ignoreMap":202},[206,207,210,213],"span",{"class":208,"line":209},"line",1,[206,211,29],{"class":212},"sVHd0",[206,214,216],{"class":215},"sP7_E"," {\n",[206,218,220,224,227,231,235,238],{"class":208,"line":219},2,[206,221,223],{"class":222},"soE4H","    font-family",[206,225,226],{"class":215},":",[206,228,230],{"class":229},"sjJ54"," \"",[206,232,234],{"class":233},"s_sjI","MyFont",[206,236,237],{"class":229},"\"",[206,239,240],{"class":215},";\n",[206,242,244,247,249,253,256,258,261,263,266,269,271,273,276,278],{"class":208,"line":243},3,[206,245,246],{"class":222},"    src",[206,248,226],{"class":215},[206,250,252],{"class":251},"sptTA"," url",[206,254,255],{"class":215},"(",[206,257,237],{"class":229},[206,259,260],{"class":233},"\u002Ffonts\u002Fmy.woff2",[206,262,237],{"class":229},[206,264,265],{"class":215},")",[206,267,268],{"class":251}," format",[206,270,255],{"class":215},[206,272,237],{"class":229},[206,274,275],{"class":233},"woff2",[206,277,237],{"class":229},[206,279,280],{"class":215},");\n",[206,282,284,287,289,293],{"class":208,"line":283},4,[206,285,286],{"class":222},"    font-display",[206,288,226],{"class":215},[206,290,292],{"class":291},"s_hVV"," swap",[206,294,240],{"class":215},[206,296,298],{"class":208,"line":297},5,[206,299,300],{"class":215},"}\n",[47,302,304,305,308],{"id":303},"格式与-src-列表","格式与 ",[27,306,307],{},"src"," 列表",[23,310,311,312,315],{},"优先 ",[121,313,314],{},"WOFF2","（Brotli 压缩，现代浏览器普遍支持），再回退 WOFF：",[198,317,319],{"className":200,"code":318,"language":12,"meta":202,"style":202},"@font-face {\n    font-family: \"MyFont\";\n    src:\n        url(\"\u002Ffonts\u002Fmy.woff2\") format(\"woff2\"),\n        url(\"\u002Ffonts\u002Fmy.woff\") format(\"woff\");\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n}\n",[27,320,321,327,341,348,376,404,418,431,442],{"__ignoreMap":202},[206,322,323,325],{"class":208,"line":209},[206,324,29],{"class":212},[206,326,216],{"class":215},[206,328,329,331,333,335,337,339],{"class":208,"line":219},[206,330,223],{"class":222},[206,332,226],{"class":215},[206,334,230],{"class":229},[206,336,234],{"class":233},[206,338,237],{"class":229},[206,340,240],{"class":215},[206,342,343,345],{"class":208,"line":243},[206,344,246],{"class":222},[206,346,347],{"class":215},":\n",[206,349,350,353,355,357,359,361,363,365,367,369,371,373],{"class":208,"line":283},[206,351,352],{"class":251},"        url",[206,354,255],{"class":215},[206,356,237],{"class":229},[206,358,260],{"class":233},[206,360,237],{"class":229},[206,362,265],{"class":215},[206,364,268],{"class":251},[206,366,255],{"class":215},[206,368,237],{"class":229},[206,370,275],{"class":233},[206,372,237],{"class":229},[206,374,375],{"class":215},"),\n",[206,377,378,380,382,384,387,389,391,393,395,397,400,402],{"class":208,"line":297},[206,379,352],{"class":251},[206,381,255],{"class":215},[206,383,237],{"class":229},[206,385,386],{"class":233},"\u002Ffonts\u002Fmy.woff",[206,388,237],{"class":229},[206,390,265],{"class":215},[206,392,268],{"class":251},[206,394,255],{"class":215},[206,396,237],{"class":229},[206,398,399],{"class":233},"woff",[206,401,237],{"class":229},[206,403,280],{"class":215},[206,405,407,410,412,416],{"class":208,"line":406},6,[206,408,409],{"class":222},"    font-weight",[206,411,226],{"class":215},[206,413,415],{"class":414},"srdBf"," 400",[206,417,240],{"class":215},[206,419,421,424,426,429],{"class":208,"line":420},7,[206,422,423],{"class":222},"    font-style",[206,425,226],{"class":215},[206,427,428],{"class":291}," normal",[206,430,240],{"class":215},[206,432,434,436,438,440],{"class":208,"line":433},8,[206,435,286],{"class":222},[206,437,226],{"class":215},[206,439,292],{"class":291},[206,441,240],{"class":215},[206,443,445],{"class":208,"line":444},9,[206,446,300],{"class":215},[23,448,449,450,453,454,457,458,460],{},"可用 ",[27,451,452],{},"unicode-range"," 拆分多文件，浏览器",[121,455,456],{},"仅在使用到对应字符时","下载该 ",[27,459,29],{}," 条目：",[198,462,464],{"className":200,"code":463,"language":12,"meta":202,"style":202},"@font-face {\n    font-family: \"MyFont\";\n    src: url(\"\u002Ffonts\u002Flatin.woff2\") format(\"woff2\");\n    unicode-range: U+0000-00FF, U+0131, U+0152-0153;\n}\n@font-face {\n    font-family: \"MyFont\";\n    src: url(\"\u002Ffonts\u002Fcjk.woff2\") format(\"woff2\");\n    unicode-range: U+4E00-9FFF;\n}\n",[27,465,466,472,486,517,552,556,562,576,607,623],{"__ignoreMap":202},[206,467,468,470],{"class":208,"line":209},[206,469,29],{"class":212},[206,471,216],{"class":215},[206,473,474,476,478,480,482,484],{"class":208,"line":219},[206,475,223],{"class":222},[206,477,226],{"class":215},[206,479,230],{"class":229},[206,481,234],{"class":233},[206,483,237],{"class":229},[206,485,240],{"class":215},[206,487,488,490,492,494,496,498,501,503,505,507,509,511,513,515],{"class":208,"line":243},[206,489,246],{"class":222},[206,491,226],{"class":215},[206,493,252],{"class":251},[206,495,255],{"class":215},[206,497,237],{"class":229},[206,499,500],{"class":233},"\u002Ffonts\u002Flatin.woff2",[206,502,237],{"class":229},[206,504,265],{"class":215},[206,506,268],{"class":251},[206,508,255],{"class":215},[206,510,237],{"class":229},[206,512,275],{"class":233},[206,514,237],{"class":229},[206,516,280],{"class":215},[206,518,519,522,524,527,531,534,537,540,542,545,547,550],{"class":208,"line":283},[206,520,521],{"class":222},"    unicode-range",[206,523,226],{"class":215},[206,525,526],{"class":291}," U+0000",[206,528,530],{"class":529},"s39Yj","-",[206,532,533],{"class":291},"00FF",[206,535,536],{"class":215},",",[206,538,539],{"class":291}," U+0131",[206,541,536],{"class":215},[206,543,544],{"class":291}," U+0152",[206,546,530],{"class":529},[206,548,549],{"class":291},"0153",[206,551,240],{"class":215},[206,553,554],{"class":208,"line":297},[206,555,300],{"class":215},[206,557,558,560],{"class":208,"line":406},[206,559,29],{"class":212},[206,561,216],{"class":215},[206,563,564,566,568,570,572,574],{"class":208,"line":420},[206,565,223],{"class":222},[206,567,226],{"class":215},[206,569,230],{"class":229},[206,571,234],{"class":233},[206,573,237],{"class":229},[206,575,240],{"class":215},[206,577,578,580,582,584,586,588,591,593,595,597,599,601,603,605],{"class":208,"line":433},[206,579,246],{"class":222},[206,581,226],{"class":215},[206,583,252],{"class":251},[206,585,255],{"class":215},[206,587,237],{"class":229},[206,589,590],{"class":233},"\u002Ffonts\u002Fcjk.woff2",[206,592,237],{"class":229},[206,594,265],{"class":215},[206,596,268],{"class":251},[206,598,255],{"class":215},[206,600,237],{"class":229},[206,602,275],{"class":233},[206,604,237],{"class":229},[206,606,280],{"class":215},[206,608,609,611,613,616,618,621],{"class":208,"line":444},[206,610,521],{"class":222},[206,612,226],{"class":215},[206,614,615],{"class":291}," U+4E00",[206,617,530],{"class":529},[206,619,620],{"class":291},"9FFF",[206,622,240],{"class":215},[206,624,626],{"class":208,"line":625},10,[206,627,300],{"class":215},[23,629,630,631,634,635,637,638,640,641,644],{},"同一 ",[27,632,633],{},"font-family"," 下多条 ",[27,636,29],{}," 按 ",[27,639,452],{}," 匹配；与 ",[27,642,643],{},"local()"," 回退可组合（用户已安装字体时跳过下载）。",[47,646,648],{"id":647},"预加载preload","预加载（preload）",[23,650,651,652,655],{},"首屏关键字体（Logo、大标题）可在 ",[27,653,654],{},"\u003Chead>"," 提前请求：",[198,657,661],{"className":658,"code":659,"language":660,"meta":202,"style":202},"language-html shiki shiki-themes material-theme-lighter github-light github-dark","\u003Clink\n    rel=\"preload\"\n    href=\"\u002Ffonts\u002Fcritical.woff2\"\n    as=\"font\"\n    type=\"font\u002Fwoff2\"\n    crossorigin\n\u002F>\n","html",[27,662,663,672,689,703,717,731,736],{"__ignoreMap":202},[206,664,665,668],{"class":208,"line":209},[206,666,667],{"class":215},"\u003C",[206,669,671],{"class":670},"sQzsp","link\n",[206,673,674,678,681,683,686],{"class":208,"line":219},[206,675,677],{"class":676},"s9AJx","    rel",[206,679,680],{"class":215},"=",[206,682,237],{"class":229},[206,684,685],{"class":233},"preload",[206,687,688],{"class":229},"\"\n",[206,690,691,694,696,698,701],{"class":208,"line":243},[206,692,693],{"class":676},"    href",[206,695,680],{"class":215},[206,697,237],{"class":229},[206,699,700],{"class":233},"\u002Ffonts\u002Fcritical.woff2",[206,702,688],{"class":229},[206,704,705,708,710,712,715],{"class":208,"line":283},[206,706,707],{"class":676},"    as",[206,709,680],{"class":215},[206,711,237],{"class":229},[206,713,714],{"class":233},"font",[206,716,688],{"class":229},[206,718,719,722,724,726,729],{"class":208,"line":297},[206,720,721],{"class":676},"    type",[206,723,680],{"class":215},[206,725,237],{"class":229},[206,727,728],{"class":233},"font\u002Fwoff2",[206,730,688],{"class":229},[206,732,733],{"class":208,"line":406},[206,734,735],{"class":676},"    crossorigin\n",[206,737,738],{"class":208,"line":420},[206,739,740],{"class":215},"\u002F>\n",[742,743,744,757],"ul",{},[745,746,747,753,754,756],"li",{},[121,748,749,752],{},[27,750,751],{},"crossorigin"," 必填","（与 ",[27,755,29],{}," 跨域规则一致），否则预加载可能无效。",[745,758,759],{},"勿滥用：占用带宽，可能挤占 HTML\u002FCSS\u002FJS。",[23,761,762,763,766,767,770],{},"避免在 CSS 顶部用 ",[27,764,765],{},"@import url(...)"," 拉字体——会串行化请求；优先 HTML ",[27,768,769],{},"\u003Clink>"," 或打包进主 CSS。",[47,772,774],{"id":773},"减轻-fout-cls","减轻 FOUT \u002F CLS",[776,777,778],"h3",{"id":778},"回退字体栈",[198,780,782],{"className":200,"code":781,"language":12,"meta":202,"style":202},"body {\n    font-family: \"MyWebFont\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif;\n}\n",[27,783,784,792,830],{"__ignoreMap":202},[206,785,786,790],{"class":208,"line":209},[206,787,789],{"class":788},"s83vy","body",[206,791,216],{"class":215},[206,793,794,796,798,800,803,805,807,809,812,814,816,818,821,823,825,828],{"class":208,"line":219},[206,795,223],{"class":222},[206,797,226],{"class":215},[206,799,230],{"class":229},[206,801,802],{"class":233},"MyWebFont",[206,804,237],{"class":229},[206,806,536],{"class":215},[206,808,230],{"class":229},[206,810,811],{"class":233},"PingFang SC",[206,813,237],{"class":229},[206,815,536],{"class":215},[206,817,230],{"class":229},[206,819,820],{"class":233},"Microsoft YaHei",[206,822,237],{"class":229},[206,824,536],{"class":215},[206,826,827],{"class":291}," sans-serif",[206,829,240],{"class":215},[206,831,832],{"class":208,"line":243},[206,833,300],{"class":215},[776,835,836],{"id":102},[27,837,102],{},[23,839,840,841,844],{},"按首选字体的 ",[121,842,843],{},"x 高度比例","调整回退字号，减少切换时行高跳动：",[198,846,848],{"className":200,"code":847,"language":12,"meta":202,"style":202},"body {\n    font-family: \"MyWebFont\", Arial, sans-serif;\n    font-size-adjust: 0.5; \u002F* 依字体 aspect value 调整 *\u002F\n}\n",[27,849,850,856,879,896],{"__ignoreMap":202},[206,851,852,854],{"class":208,"line":209},[206,853,789],{"class":788},[206,855,216],{"class":215},[206,857,858,860,862,864,866,868,870,873,875,877],{"class":208,"line":219},[206,859,223],{"class":222},[206,861,226],{"class":215},[206,863,230],{"class":229},[206,865,802],{"class":233},[206,867,237],{"class":229},[206,869,536],{"class":215},[206,871,872],{"class":291}," Arial",[206,874,536],{"class":215},[206,876,827],{"class":291},[206,878,240],{"class":215},[206,880,881,884,886,889,892],{"class":208,"line":243},[206,882,883],{"class":222},"    font-size-adjust",[206,885,226],{"class":215},[206,887,888],{"class":414}," 0.5",[206,890,891],{"class":215},";",[206,893,895],{"class":894},"sutJx"," \u002F* 依字体 aspect value 调整 *\u002F\n",[206,897,898],{"class":208,"line":283},[206,899,300],{"class":215},[776,901,903,905],{"id":902},"font-face-度量覆盖较新",[27,904,29],{}," 度量覆盖（较新）",[23,907,908,103,910,103,913,103,916,919],{},[27,909,106],{},[27,911,912],{},"ascent-override",[27,914,915],{},"descent-override",[27,917,918],{},"line-gap-override"," 可让回退字体度量更接近 Web 字体，进一步降低 CLS（需查浏览器支持）。",[47,921,922],{"id":922},"变量字体",[23,924,925],{},"单个文件包含多轴（字重、宽度等），适合需要多种字重的设计；若只用一种字重，静态子集文件可能更小。按实际轴使用情况评估体积。",[47,927,928],{"id":928},"字体子集化",[23,930,931,932,935,936,939],{},"从完整字库提取页面",[121,933,934],{},"实际用到的字符","，生成小体积 ",[27,937,938],{},".woff2","。",[776,941,942],{"id":942},"工具",[51,944,945,954],{},[54,946,947],{},[57,948,949,951],{},[60,950,942],{},[60,952,953],{},"说明",[67,955,956,968,984],{},[57,957,958,965],{},[72,959,960],{},[32,961,964],{"href":962,"rel":963},"https:\u002F\u002Fgithub.com\u002Ffonttools\u002Ffonttools",[44],"fonttools \u002F pyftsubset",[72,966,967],{},"Google Fonts 等常用，可指定 Unicode 范围",[57,969,970,977],{},[72,971,972],{},[32,973,976],{"href":974,"rel":975},"https:\u002F\u002Fgithub.com\u002Faui\u002Ffont-spider",[44],"font-spider",[72,978,979,980,983],{},"扫描 HTML\u002FCSS 用到的字；",[121,981,982],{},"会覆盖原字体文件","，务必备份",[57,985,986,993],{},[72,987,988],{},[32,989,992],{"href":990,"rel":991},"https:\u002F\u002Fwww.fontsquirrel.com\u002Ftools\u002Fwebfont-generator",[44],"Font Squirrel Webfont Generator",[72,994,995],{},"适合少量字符、手工场景",[776,997,999],{"id":998},"font-spider-流程要点","font-spider 流程要点",[1001,1002,1003,1012,1019],"ol",{},[745,1004,1005,1007,1008,1011],{},[27,1006,29],{}," 使用",[121,1009,1010],{},"本地路径","，页面 HTML 中出现需保留的汉字。",[745,1013,1014,1015,1018],{},"运行 ",[27,1016,1017],{},"font-spider index.html"," 生成子集。",[745,1020,1021,1024,1025,1028,1029,1032],{},[121,1022,1023],{},"保留原始字体备份","（如 ",[27,1026,1027],{},"raw\u002F","），构建时复制到 ",[27,1030,1031],{},"dist\u002F"," 再子集化。",[776,1034,1035],{"id":1035},"中文分层策略",[742,1037,1038,1044,1050],{},[745,1039,1040,1043],{},[121,1041,1042],{},"标题\u002FLogo","：静态子集，仅打包出现的字。",[745,1045,1046,1049],{},[121,1047,1048],{},"正文","：优先系统字体栈，避免加载全量中文 Web 字体。",[745,1051,1052,1055],{},[121,1053,1054],{},"UGC\u002F不可预知内容","：常用字基础包 + 动态补字（需自建服务或第三方），复杂度高。",[47,1057,1058],{"id":1058},"实践路径",[1001,1060,1061,1064,1074,1082,1085],{},[745,1062,1063],{},"能不用 Web 字体则不用；中文正文优先系统 UI 字体。",[745,1065,1066,1067,1070,1071,1073],{},"必须用：WOFF2 + ",[27,1068,1069],{},"font-display: swap","（或 ",[27,1072,189],{}," 装饰字）。",[745,1075,1076,1077,1079,1080,939],{},"首屏关键字体：",[27,1078,685],{}," + ",[27,1081,751],{},[745,1083,1084],{},"中文按需子集；英文可考虑 CDN（自带子集，注意隐私与合规）。",[745,1086,1087,1088,1090],{},"监控 CLS，必要时 ",[27,1089,102],{}," \u002F 度量覆盖。",[47,1092,1093],{"id":1093},"参考文献",[23,1095,1096],{},"以下链接在编写时均可正常访问：",[51,1098,1099,1108],{},[54,1100,1101],{},[57,1102,1103,1106],{},[60,1104,1105],{},"资料",[60,1107,953],{},[67,1109,1110,1122,1134,1146,1158,1170,1182],{},[57,1111,1112,1119],{},[72,1113,1114],{},[32,1115,1118],{"href":1116,"rel":1117},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002F@font-face",[44],"MDN：@font-face",[72,1120,1121],{},"字体声明",[57,1123,1124,1131],{},[72,1125,1126],{},[32,1127,1130],{"href":1128,"rel":1129},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002F@font-face\u002Ffont-display",[44],"MDN：font-display",[72,1132,1133],{},"阻塞\u002F交换时间轴",[57,1135,1136,1143],{},[72,1137,1138],{},[32,1139,1142],{"href":1140,"rel":1141},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Ffont-size-adjust",[44],"MDN：font-size-adjust",[72,1144,1145],{},"回退字号匹配",[57,1147,1148,1155],{},[72,1149,1150],{},[32,1151,1154],{"href":1152,"rel":1153},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FHTML\u002FAttributes\u002Frel\u002Fpreload",[44],"MDN：rel=preload",[72,1156,1157],{},"字体预加载",[57,1159,1160,1167],{},[72,1161,1162],{},[32,1163,1166],{"href":1164,"rel":1165},"https:\u002F\u002Fweb.dev\u002Farticles\u002Ffont-best-practices",[44],"web.dev：Best practices for fonts",[72,1168,1169],{},"性能与加载策略（英文）",[57,1171,1172,1179],{},[72,1173,1174],{},[32,1175,1178],{"href":1176,"rel":1177},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-fonts-4\u002F",[44],"W3C：CSS Fonts Module Level 4",[72,1180,1181],{},"规范（英文）",[57,1183,1184,1190],{},[72,1185,1186],{},[32,1187,1189],{"href":962,"rel":1188},[44],"fonttools",[72,1191,1192],{},"子集化工具",[1194,1195,1196],"style",{},"html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .soE4H, html code.shiki .soE4H{--shiki-light:#8796B0;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sptTA, html code.shiki .sptTA{--shiki-light:#6182B8;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s39Yj, html code.shiki .s39Yj{--shiki-light:#39ADB5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sQzsp, html code.shiki .sQzsp{--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s83vy, html code.shiki .s83vy{--shiki-light:#E2931D;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}",{"title":202,"searchDepth":219,"depth":219,"links":1198},[1199,1200,1202,1204,1205,1211,1212,1217,1218],{"id":49,"depth":219,"text":49},{"id":110,"depth":219,"text":1201},"font-display（加载时间轴）",{"id":303,"depth":219,"text":1203},"格式与 src 列表",{"id":647,"depth":219,"text":648},{"id":773,"depth":219,"text":774,"children":1206},[1207,1208,1209],{"id":778,"depth":243,"text":778},{"id":102,"depth":243,"text":102},{"id":902,"depth":243,"text":1210},"@font-face 度量覆盖（较新）",{"id":922,"depth":219,"text":922},{"id":928,"depth":219,"text":928,"children":1213},[1214,1215,1216],{"id":942,"depth":243,"text":942},{"id":998,"depth":243,"text":999},{"id":1035,"depth":243,"text":1035},{"id":1058,"depth":219,"text":1058},{"id":1093,"depth":219,"text":1093},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fweb\u002FCss\u002Ffont-optimization","knowledge\u002Fknowledge\u002Fbooklet\u002Fweb\u002FCss\u002Ffont-optimization.md","md",{"items":1224},[1225,1229,1233,1237,1241,1245],{"path":1226,"title":1227,"description":1228,"category":10,"score":406},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fless-core","Less 基础与核心语法","Less 是 JavaScript 实现的 CSS 预处理器，在 CSS 语法上扩展变量（@）、嵌套、混合、运算与函数，编译为普通 CSS 后由浏览器加载；本文覆盖安装、CLI、构建工具集成与全部核心语法。",{"path":1230,"title":1231,"description":1232,"category":10,"score":406},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-intro","Sass 简介与安装","Sass（Syntactically Awesome Style Sheets）是 CSS 预处理器，在 CSS 语法上增加变量、嵌套、混合、模块、控制指令等；有 SCSS 与缩进语法两种源码语法，官方实现为 Dart Sass。",{"path":1234,"title":1235,"description":1236,"category":10,"score":406},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-modules","模块与控制流：@use、内置函数、@if\u002F@for\u002F@each","Dart Sass 推荐用 @use\u002F@forward 替代已弃用的 @import；内置 sass:* 模块提供颜色、字符串、列表、Map、数学等函数；@if\u002F@for\u002F@each\u002F@while 用于条件与循环生成样式。",{"path":1238,"title":1239,"description":1240,"category":10,"score":406},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-reuse","复用机制：Mixin 与继承","Mixin（@mixin\u002F@include）支持参数与 @content，适合动态样式；@extend 与 %placeholder 通过合并选择器复用完全相同的静态样式，减少 CSS 体积。",{"path":1242,"title":1243,"description":1244,"category":10,"score":406},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-syntax","语法基础：变量、嵌套与运算","Sass 语法基础：$ 变量与插值、选择器嵌套与 & 父选择器引用、数学\u002F颜色\u002F字符串运算、三种注释语法及与原生 CSS 嵌套的关系。",{"path":1246,"title":1247,"description":1248,"category":10,"score":406},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcolor","颜色与背景","color 设置前景（多为文字）色；background-* 设置元素背景（颜色、图像、渐变）。二者共同决定对比度与视觉层次，直接影响 无障碍 阅读体验。排版中的文本颜色用法见 排版与文本。",{"series":1250,"title":12,"items":1251,"index":297,"prev":1311,"next":1312},"booklet\u002Fweb\u002Fcss",[1252,1256,1258,1262,1266,1270,1271,1275,1279,1281,1283,1287,1291,1295,1299,1303,1304,1305,1306,1307],{"path":1253,"title":1254,"date":1255,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fanimation","变换、过渡与动画","2023-01-09",{"path":1246,"title":1247,"date":1257,"pinned":15},"2025-05-01",{"path":1259,"title":1260,"date":1261,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcss-sass-less","CSS、Sass 与 Less","2019-09-28",{"path":1263,"title":1264,"date":1265,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fdisplay","display 与常规流","2024-01-30",{"path":1267,"title":1268,"date":1269,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fflex","弹性盒子","2020-09-29",{"path":7,"title":8,"date":14,"pinned":15},{"path":1272,"title":1273,"date":1274,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-unit","字体单位","2021-10-12",{"path":1276,"title":1277,"date":1278,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fgrid","网格布局","2020-11-09",{"path":34,"title":35,"date":1280,"pinned":15},"2024-01-25",{"path":1226,"title":1227,"date":1282,"pinned":15},"2026-07-23",{"path":1284,"title":1285,"date":1286,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fmodel","盒模型","2023-09-04",{"path":1288,"title":1289,"date":1290,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fnew-css","现代 CSS 特性概览","2021-11-09",{"path":1292,"title":1293,"date":1294,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fposition","定位","2022-11-08",{"path":1296,"title":1297,"date":1298,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fproject","工程化集成与扩展","2024-07-02",{"path":1300,"title":1301,"date":1302,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fresponsive","响应式设计与交互","2022-01-31",{"path":1230,"title":1231,"date":1282,"pinned":15},{"path":1234,"title":1235,"date":1282,"pinned":15},{"path":1238,"title":1239,"date":1282,"pinned":15},{"path":1242,"title":1243,"date":1282,"pinned":15},{"path":1308,"title":1309,"date":1310,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fvisual-effects","视觉效果","2021-11-04",{"path":1267,"title":1268,"date":1269,"pinned":15},{"path":1272,"title":1273,"date":1274,"pinned":15}]