[{"data":1,"prerenderedAt":1322},["ShallowReactive",2],{"doc-page:\u002Fdocs\u002Ffont-icon-resources":3},{"doc":4,"prev":1282,"next":1289,"resolvedType":8,"readingMinutes":186,"audience":1296,"checklist":1300,"related":1304},{"path":5,"title":6,"description":7,"docType":8,"resourceKind":9,"categoryId":10,"categoryLabel":11,"updatedAt":12,"publishedAt":12,"icon":13,"body":14},"\u002Fdocs\u002Ffont-icon-resources","字体与图标资源","开发常用字体、图标库、Web 字体加载优化与自托管方案","article",null,"online-tools","在线工具","2026-02-27","i-carbon-tool-box",{"type":15,"value":16,"toc":1256},"minimark",[17,20,24,28,63,66,69,151,205,208,269,273,278,374,378,387,405,423,426,511,576,579,582,596,599,602,606,654,663,667,681,765,768,839,843,980,984,1033,1123,1126,1130,1133,1147,1150,1153,1164,1168,1171,1182,1185,1196,1199,1219,1222,1252],[18,19,6],"h1",{"id":6},[21,22,23],"p",{},"这页适合作为“界面视觉基础素材入口”。字体和图标选型看起来像小事，但它们会持续影响界面一致性、加载性能、跨平台显示和品牌感。",[25,26,27],"h2",{"id":27},"先按用途选",[29,30,31,39,45,51,57],"ul",{},[32,33,34,38],"li",{},[35,36,37],"strong",{},"终端和编辑器","：优先编程字体",[32,40,41,44],{},[35,42,43],{},"中文正文排版","：优先中文字体",[32,46,47,50],{},[35,48,49],{},"Web 页面主字体","：优先可控的 Web 字体方案",[32,52,53,56],{},[35,54,55],{},"组件图标系统","：优先统一来源的图标库",[32,58,59,62],{},[35,60,61],{},"品牌图标和社媒图标","：优先品牌类图标集",[21,64,65],{},"真正重要的不是资源越多越好，而是项目里是否能长期保持“同一层级用同一套视觉规则”。",[25,67,68],{"id":68},"编程字体",[70,71,72,85],"table",{},[73,74,75],"thead",{},[76,77,78,82],"tr",{},[79,80,81],"th",{},"字体",[79,83,84],{},"特点",[86,87,88,103,115,127,139],"tbody",{},[76,89,90,100],{},[91,92,93],"td",{},[94,95,99],"a",{"href":96,"rel":97},"https:\u002F\u002Fgithub.com\u002Ftonsky\u002FFiraCode",[98],"nofollow","Fira Code",[91,101,102],{},"连字符，最流行",[76,104,105,112],{},[91,106,107],{},[94,108,111],{"href":109,"rel":110},"https:\u002F\u002Fwww.jetbrains.com\u002Flp\u002Fmono\u002F",[98],"JetBrains Mono",[91,113,114],{},"JetBrains 出品",[76,116,117,124],{},[91,118,119],{},[94,120,123],{"href":121,"rel":122},"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fcascadia-code",[98],"Cascadia Code",[91,125,126],{},"微软出品，Windows 终端",[76,128,129,136],{},[91,130,131],{},[94,132,135],{"href":133,"rel":134},"https:\u002F\u002Fgithub.com\u002Fsubframe7536\u002Fmaple-font",[98],"Maple Mono",[91,137,138],{},"圆润风格，中文友好",[76,140,141,148],{},[91,142,143],{},[94,144,147],{"href":145,"rel":146},"https:\u002F\u002Fmonaspace.githubnext.com\u002F",[98],"Monaspace",[91,149,150],{},"GitHub 出品，5 种变体",[152,153,158],"pre",{"className":154,"code":155,"language":156,"meta":157,"style":157},"language-powershell shiki shiki-themes github-light github-dark","# 通过 Scoop 安装\nscoop bucket add nerd-fonts\nscoop install FiraCode-NF\nscoop install JetBrainsMono-NF\n","powershell","",[159,160,161,170,184,195],"code",{"__ignoreMap":157},[162,163,166],"span",{"class":164,"line":165},"line",1,[162,167,169],{"class":168},"sJ8bj","# 通过 Scoop 安装\n",[162,171,173,177,181],{"class":164,"line":172},2,[162,174,176],{"class":175},"sVt8B","scoop bucket add nerd",[162,178,180],{"class":179},"szBVR","-",[162,182,183],{"class":175},"fonts\n",[162,185,187,190,192],{"class":164,"line":186},3,[162,188,189],{"class":175},"scoop install FiraCode",[162,191,180],{"class":179},[162,193,194],{"class":175},"NF\n",[162,196,198,201,203],{"class":164,"line":197},4,[162,199,200],{"class":175},"scoop install JetBrainsMono",[162,202,180],{"class":179},[162,204,194],{"class":175},[25,206,207],{"id":207},"中文字体",[70,209,210,219],{},[73,211,212],{},[76,213,214,216],{},[79,215,81],{},[79,217,218],{},"说明",[86,220,221,233,245,257],{},[76,222,223,230],{},[91,224,225],{},[94,226,229],{"href":227,"rel":228},"https:\u002F\u002Fgithub.com\u002Fadobe-fonts\u002Fsource-han-sans",[98],"思源黑体",[91,231,232],{},"Adobe + Google",[76,234,235,242],{},[91,236,237],{},[94,238,241],{"href":239,"rel":240},"https:\u002F\u002Fgithub.com\u002Fadobe-fonts\u002Fsource-han-serif",[98],"思源宋体",[91,243,244],{},"衬线体",[76,246,247,254],{},[91,248,249],{},[94,250,253],{"href":251,"rel":252},"https:\u002F\u002Fgithub.com\u002Flxgw\u002FLxgwWenKai",[98],"霞鹜文楷",[91,255,256],{},"手写风格，免费商用",[76,258,259,266],{},[91,260,261],{},[94,262,265],{"href":263,"rel":264},"https:\u002F\u002Fgithub.com\u002Fatelier-anchor\u002Fsmiley-sans",[98],"得意黑",[91,267,268],{},"现代无衬线",[25,270,272],{"id":271},"web-字体","Web 字体",[274,275,277],"h3",{"id":276},"google-fonts","Google Fonts",[152,279,283],{"className":280,"code":281,"language":282,"meta":157,"style":157},"language-html shiki shiki-themes github-light github-dark","\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\" \u002F>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin \u002F>\n\u003Clink\n  href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&display=swap\"\n  rel=\"stylesheet\"\n\u002F>\n","html",[159,284,285,316,340,347,357,368],{"__ignoreMap":157},[162,286,287,290,294,298,301,305,308,310,313],{"class":164,"line":165},[162,288,289],{"class":175},"\u003C",[162,291,293],{"class":292},"s9eBZ","link",[162,295,297],{"class":296},"sScJk"," rel",[162,299,300],{"class":175},"=",[162,302,304],{"class":303},"sZZnC","\"preconnect\"",[162,306,307],{"class":296}," href",[162,309,300],{"class":175},[162,311,312],{"class":303},"\"https:\u002F\u002Ffonts.googleapis.com\"",[162,314,315],{"class":175}," \u002F>\n",[162,317,318,320,322,324,326,328,330,332,335,338],{"class":164,"line":172},[162,319,289],{"class":175},[162,321,293],{"class":292},[162,323,297],{"class":296},[162,325,300],{"class":175},[162,327,304],{"class":303},[162,329,307],{"class":296},[162,331,300],{"class":175},[162,333,334],{"class":303},"\"https:\u002F\u002Ffonts.gstatic.com\"",[162,336,337],{"class":296}," crossorigin",[162,339,315],{"class":175},[162,341,342,344],{"class":164,"line":186},[162,343,289],{"class":175},[162,345,346],{"class":292},"link\n",[162,348,349,352,354],{"class":164,"line":197},[162,350,351],{"class":296},"  href",[162,353,300],{"class":175},[162,355,356],{"class":303},"\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&display=swap\"\n",[162,358,360,363,365],{"class":164,"line":359},5,[162,361,362],{"class":296},"  rel",[162,364,300],{"class":175},[162,366,367],{"class":303},"\"stylesheet\"\n",[162,369,371],{"class":164,"line":370},6,[162,372,373],{"class":175},"\u002F>\n",[274,375,377],{"id":376},"自托管推荐","自托管（推荐）",[21,379,380,381,386],{},"使用 ",[94,382,385],{"href":383,"rel":384},"https:\u002F\u002Ffontsource.org\u002F",[98],"Fontsource","：",[152,388,392],{"className":389,"code":390,"language":391,"meta":157,"style":157},"language-bash shiki shiki-themes github-light github-dark","pnpm add @fontsource-variable\u002Finter\n","bash",[159,393,394],{"__ignoreMap":157},[162,395,396,399,402],{"class":164,"line":165},[162,397,398],{"class":296},"pnpm",[162,400,401],{"class":303}," add",[162,403,404],{"class":303}," @fontsource-variable\u002Finter\n",[152,406,410],{"className":407,"code":408,"language":409,"meta":157,"style":157},"language-javascript shiki shiki-themes github-light github-dark","import \"@fontsource-variable\u002Finter\";\n","javascript",[159,411,412],{"__ignoreMap":157},[162,413,414,417,420],{"class":164,"line":165},[162,415,416],{"class":179},"import",[162,418,419],{"class":303}," \"@fontsource-variable\u002Finter\"",[162,421,422],{"class":175},";\n",[274,424,425],{"id":425},"字体加载优化",[152,427,431],{"className":428,"code":429,"language":430,"meta":157,"style":157},"language-css shiki shiki-themes github-light github-dark","\u002F* font-display 控制加载行为 *\u002F\n@font-face {\n  font-family: \"MyFont\";\n  src: url(\"\u002Ffonts\u002Fmyfont.woff2\") format(\"woff2\");\n  font-display: swap; \u002F* 先用系统字体，加载完切换 *\u002F\n}\n","css",[159,432,433,438,446,460,490,506],{"__ignoreMap":157},[162,434,435],{"class":164,"line":165},[162,436,437],{"class":168},"\u002F* font-display 控制加载行为 *\u002F\n",[162,439,440,443],{"class":164,"line":172},[162,441,442],{"class":179},"@font-face",[162,444,445],{"class":175}," {\n",[162,447,448,452,455,458],{"class":164,"line":186},[162,449,451],{"class":450},"sj4cs","  font-family",[162,453,454],{"class":175},": ",[162,456,457],{"class":303},"\"MyFont\"",[162,459,422],{"class":175},[162,461,462,465,467,470,473,476,479,482,484,487],{"class":164,"line":197},[162,463,464],{"class":450},"  src",[162,466,454],{"class":175},[162,468,469],{"class":450},"url",[162,471,472],{"class":175},"(",[162,474,475],{"class":303},"\"\u002Ffonts\u002Fmyfont.woff2\"",[162,477,478],{"class":175},") ",[162,480,481],{"class":450},"format",[162,483,472],{"class":175},[162,485,486],{"class":303},"\"woff2\"",[162,488,489],{"class":175},");\n",[162,491,492,495,497,500,503],{"class":164,"line":359},[162,493,494],{"class":450},"  font-display",[162,496,454],{"class":175},[162,498,499],{"class":450},"swap",[162,501,502],{"class":175},"; ",[162,504,505],{"class":168},"\u002F* 先用系统字体，加载完切换 *\u002F\n",[162,507,508],{"class":164,"line":370},[162,509,510],{"class":175},"}\n",[152,512,514],{"className":280,"code":513,"language":282,"meta":157,"style":157},"\u003C!-- 预加载关键字体 -->\n\u003Clink\n  rel=\"preload\"\n  href=\"\u002Ffonts\u002Finter.woff2\"\n  as=\"font\"\n  type=\"font\u002Fwoff2\"\n  crossorigin\n\u002F>\n",[159,515,516,521,527,536,545,555,565,571],{"__ignoreMap":157},[162,517,518],{"class":164,"line":165},[162,519,520],{"class":168},"\u003C!-- 预加载关键字体 -->\n",[162,522,523,525],{"class":164,"line":172},[162,524,289],{"class":175},[162,526,346],{"class":292},[162,528,529,531,533],{"class":164,"line":186},[162,530,362],{"class":296},[162,532,300],{"class":175},[162,534,535],{"class":303},"\"preload\"\n",[162,537,538,540,542],{"class":164,"line":197},[162,539,351],{"class":296},[162,541,300],{"class":175},[162,543,544],{"class":303},"\"\u002Ffonts\u002Finter.woff2\"\n",[162,546,547,550,552],{"class":164,"line":359},[162,548,549],{"class":296},"  as",[162,551,300],{"class":175},[162,553,554],{"class":303},"\"font\"\n",[162,556,557,560,562],{"class":164,"line":370},[162,558,559],{"class":296},"  type",[162,561,300],{"class":175},[162,563,564],{"class":303},"\"font\u002Fwoff2\"\n",[162,566,568],{"class":164,"line":567},7,[162,569,570],{"class":296},"  crossorigin\n",[162,572,574],{"class":164,"line":573},8,[162,575,373],{"class":175},[25,577,578],{"id":578},"推荐搭配方式",[21,580,581],{},"一个比较稳的组合通常是：",[29,583,584,587,590,593],{},[32,585,586],{},"代码区：一种编程字体",[32,588,589],{},"中文正文：一种中文主字体",[32,591,592],{},"英文 \u002F UI：一种无衬线 UI 字体",[32,594,595],{},"图标：一种主图标库",[21,597,598],{},"尽量不要在同一个项目里长期混用过多字体和图标风格，否则界面会显得很散。",[25,600,601],{"id":601},"图标库",[274,603,605],{"id":604},"unocss-icons本项目使用","UnoCSS Icons（本项目使用）",[152,607,609],{"className":280,"code":608,"language":282,"meta":157,"style":157},"\u003C!-- 直接用 class -->\n\u003Cspan class=\"i-carbon-home\" \u002F>\n\u003Cspan class=\"i-mdi-github\" \u002F>\n",[159,610,611,616,637],{"__ignoreMap":157},[162,612,613],{"class":164,"line":165},[162,614,615],{"class":168},"\u003C!-- 直接用 class -->\n",[162,617,618,620,622,625,627,630,634],{"class":164,"line":172},[162,619,289],{"class":175},[162,621,162],{"class":292},[162,623,624],{"class":296}," class",[162,626,300],{"class":175},[162,628,629],{"class":303},"\"i-carbon-home\"",[162,631,633],{"class":632},"s7hpK"," \u002F",[162,635,636],{"class":175},">\n",[162,638,639,641,643,645,647,650,652],{"class":164,"line":186},[162,640,289],{"class":175},[162,642,162],{"class":292},[162,644,624],{"class":296},[162,646,300],{"class":175},[162,648,649],{"class":303},"\"i-mdi-github\"",[162,651,633],{"class":632},[162,653,636],{"class":175},[21,655,656,657,662],{},"支持所有 ",[94,658,661],{"href":659,"rel":660},"https:\u002F\u002Ficon-sets.iconify.design\u002F",[98],"Iconify"," 图标集。",[274,664,666],{"id":665},"lucide","Lucide",[152,668,670],{"className":389,"code":669,"language":391,"meta":157,"style":157},"pnpm add lucide-vue-next\n",[159,671,672],{"__ignoreMap":157},[162,673,674,676,678],{"class":164,"line":165},[162,675,398],{"class":296},[162,677,401],{"class":303},[162,679,680],{"class":303}," lucide-vue-next\n",[152,682,686],{"className":683,"code":684,"language":685,"meta":157,"style":157},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup>\nimport { Home, Settings, User } from \"lucide-vue-next\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CHome :size=\"24\" \u002F>\n\u003C\u002Ftemplate>\n","vue",[159,687,688,700,715,724,730,739,757],{"__ignoreMap":157},[162,689,690,692,695,698],{"class":164,"line":165},[162,691,289],{"class":175},[162,693,694],{"class":292},"script",[162,696,697],{"class":296}," setup",[162,699,636],{"class":175},[162,701,702,704,707,710,713],{"class":164,"line":172},[162,703,416],{"class":179},[162,705,706],{"class":175}," { Home, Settings, User } ",[162,708,709],{"class":179},"from",[162,711,712],{"class":303}," \"lucide-vue-next\"",[162,714,422],{"class":175},[162,716,717,720,722],{"class":164,"line":186},[162,718,719],{"class":175},"\u003C\u002F",[162,721,694],{"class":292},[162,723,636],{"class":175},[162,725,726],{"class":164,"line":197},[162,727,729],{"emptyLinePlaceholder":728},true,"\n",[162,731,732,734,737],{"class":164,"line":359},[162,733,289],{"class":175},[162,735,736],{"class":292},"template",[162,738,636],{"class":175},[162,740,741,744,747,750,752,755],{"class":164,"line":370},[162,742,743],{"class":175},"  \u003C",[162,745,746],{"class":292},"Home",[162,748,749],{"class":296}," :size",[162,751,300],{"class":175},[162,753,754],{"class":303},"\"24\"",[162,756,315],{"class":175},[162,758,759,761,763],{"class":164,"line":567},[162,760,719],{"class":175},[162,762,736],{"class":292},[162,764,636],{"class":175},[274,766,767],{"id":767},"其他图标资源",[70,769,770,779],{},[73,771,772],{},[76,773,774,777],{},[79,775,776],{},"资源",[79,778,218],{},[86,780,781,791,803,815,827],{},[76,782,783,788],{},[91,784,785],{},[94,786,661],{"href":659,"rel":787},[98],[91,789,790],{},"20 万+ 图标聚合",[76,792,793,800],{},[91,794,795],{},[94,796,799],{"href":797,"rel":798},"https:\u002F\u002Fheroicons.com\u002F",[98],"Heroicons",[91,801,802],{},"Tailwind 官方",[76,804,805,812],{},[91,806,807],{},[94,808,811],{"href":809,"rel":810},"https:\u002F\u002Fphosphoricons.com\u002F",[98],"Phosphor",[91,813,814],{},"风格统一，6 种粗细",[76,816,817,824],{},[91,818,819],{},[94,820,823],{"href":821,"rel":822},"https:\u002F\u002Fsimpleicons.org\u002F",[98],"Simple Icons",[91,825,826],{},"品牌 Logo",[76,828,829,836],{},[91,830,831],{},[94,832,835],{"href":833,"rel":834},"https:\u002F\u002Ftabler.io\u002Ficons",[98],"Tabler Icons",[91,837,838],{},"5000+ 线性图标",[274,840,842],{"id":841},"svg-sprite","SVG Sprite",[152,844,846],{"className":280,"code":845,"language":282,"meta":157,"style":157},"\u003C!-- 定义 -->\n\u003Csvg style=\"display:none\">\n  \u003Csymbol id=\"icon-home\" viewBox=\"0 0 24 24\">\n    \u003Cpath d=\"M3 12l9-9 9 9v9a1 1 0 01-1 1H4a1 1 0 01-1-1z\" \u002F>\n  \u003C\u002Fsymbol>\n\u003C\u002Fsvg>\n\n\u003C!-- 使用 -->\n\u003Csvg width=\"24\" height=\"24\">\u003Cuse href=\"#icon-home\" \u002F>\u003C\u002Fsvg>\n",[159,847,848,853,870,895,913,922,930,934,939],{"__ignoreMap":157},[162,849,850],{"class":164,"line":165},[162,851,852],{"class":168},"\u003C!-- 定义 -->\n",[162,854,855,857,860,863,865,868],{"class":164,"line":172},[162,856,289],{"class":175},[162,858,859],{"class":292},"svg",[162,861,862],{"class":296}," style",[162,864,300],{"class":175},[162,866,867],{"class":303},"\"display:none\"",[162,869,636],{"class":175},[162,871,872,874,877,880,882,885,888,890,893],{"class":164,"line":186},[162,873,743],{"class":175},[162,875,876],{"class":292},"symbol",[162,878,879],{"class":296}," id",[162,881,300],{"class":175},[162,883,884],{"class":303},"\"icon-home\"",[162,886,887],{"class":296}," viewBox",[162,889,300],{"class":175},[162,891,892],{"class":303},"\"0 0 24 24\"",[162,894,636],{"class":175},[162,896,897,900,903,906,908,911],{"class":164,"line":197},[162,898,899],{"class":175},"    \u003C",[162,901,902],{"class":292},"path",[162,904,905],{"class":296}," d",[162,907,300],{"class":175},[162,909,910],{"class":303},"\"M3 12l9-9 9 9v9a1 1 0 01-1 1H4a1 1 0 01-1-1z\"",[162,912,315],{"class":175},[162,914,915,918,920],{"class":164,"line":359},[162,916,917],{"class":175},"  \u003C\u002F",[162,919,876],{"class":292},[162,921,636],{"class":175},[162,923,924,926,928],{"class":164,"line":370},[162,925,719],{"class":175},[162,927,859],{"class":292},[162,929,636],{"class":175},[162,931,932],{"class":164,"line":567},[162,933,729],{"emptyLinePlaceholder":728},[162,935,936],{"class":164,"line":573},[162,937,938],{"class":168},"\u003C!-- 使用 -->\n",[162,940,942,944,946,949,951,953,956,958,960,963,966,968,970,973,976,978],{"class":164,"line":941},9,[162,943,289],{"class":175},[162,945,859],{"class":292},[162,947,948],{"class":296}," width",[162,950,300],{"class":175},[162,952,754],{"class":303},[162,954,955],{"class":296}," height",[162,957,300],{"class":175},[162,959,754],{"class":303},[162,961,962],{"class":175},">\u003C",[162,964,965],{"class":292},"use",[162,967,307],{"class":296},[162,969,300],{"class":175},[162,971,972],{"class":303},"\"#icon-home\"",[162,974,975],{"class":175}," \u002F>\u003C\u002F",[162,977,859],{"class":292},[162,979,636],{"class":175},[25,981,983],{"id":982},"favicon-生成","Favicon 生成",[70,985,986,995],{},[73,987,988],{},[76,989,990,993],{},[79,991,992],{},"工具",[79,994,218],{},[86,996,997,1009,1021],{},[76,998,999,1006],{},[91,1000,1001],{},[94,1002,1005],{"href":1003,"rel":1004},"https:\u002F\u002Ffavicon.io\u002F",[98],"Favicon.io",[91,1007,1008],{},"文字\u002F图片生成",[76,1010,1011,1018],{},[91,1012,1013],{},[94,1014,1017],{"href":1015,"rel":1016},"https:\u002F\u002Frealfavicongenerator.net\u002F",[98],"RealFaviconGenerator",[91,1019,1020],{},"全平台适配",[76,1022,1023,1030],{},[91,1024,1025],{},[94,1026,1029],{"href":1027,"rel":1028},"https:\u002F\u002Fcss-tricks.com\u002Fsvg-favicons\u002F",[98],"SVG Favicon",[91,1031,1032],{},"现代 SVG 方案",[152,1034,1036],{"className":280,"code":1035,"language":282,"meta":157,"style":157},"\u003C!-- 现代 Favicon 方案 -->\n\u003Clink rel=\"icon\" type=\"image\u002Fsvg+xml\" href=\"\u002Ffavicon.svg\" \u002F>\n\u003Clink rel=\"icon\" type=\"image\u002Fpng\" href=\"\u002Ffavicon.png\" \u002F>\n\u003Clink rel=\"apple-touch-icon\" href=\"\u002Fapple-touch-icon.png\" \u002F>\n",[159,1037,1038,1043,1073,1101],{"__ignoreMap":157},[162,1039,1040],{"class":164,"line":165},[162,1041,1042],{"class":168},"\u003C!-- 现代 Favicon 方案 -->\n",[162,1044,1045,1047,1049,1051,1053,1056,1059,1061,1064,1066,1068,1071],{"class":164,"line":172},[162,1046,289],{"class":175},[162,1048,293],{"class":292},[162,1050,297],{"class":296},[162,1052,300],{"class":175},[162,1054,1055],{"class":303},"\"icon\"",[162,1057,1058],{"class":296}," type",[162,1060,300],{"class":175},[162,1062,1063],{"class":303},"\"image\u002Fsvg+xml\"",[162,1065,307],{"class":296},[162,1067,300],{"class":175},[162,1069,1070],{"class":303},"\"\u002Ffavicon.svg\"",[162,1072,315],{"class":175},[162,1074,1075,1077,1079,1081,1083,1085,1087,1089,1092,1094,1096,1099],{"class":164,"line":186},[162,1076,289],{"class":175},[162,1078,293],{"class":292},[162,1080,297],{"class":296},[162,1082,300],{"class":175},[162,1084,1055],{"class":303},[162,1086,1058],{"class":296},[162,1088,300],{"class":175},[162,1090,1091],{"class":303},"\"image\u002Fpng\"",[162,1093,307],{"class":296},[162,1095,300],{"class":175},[162,1097,1098],{"class":303},"\"\u002Ffavicon.png\"",[162,1100,315],{"class":175},[162,1102,1103,1105,1107,1109,1111,1114,1116,1118,1121],{"class":164,"line":197},[162,1104,289],{"class":175},[162,1106,293],{"class":292},[162,1108,297],{"class":296},[162,1110,300],{"class":175},[162,1112,1113],{"class":303},"\"apple-touch-icon\"",[162,1115,307],{"class":296},[162,1117,300],{"class":175},[162,1119,1120],{"class":303},"\"\u002Fapple-touch-icon.png\"",[162,1122,315],{"class":175},[25,1124,1125],{"id":1125},"常见问题",[274,1127,1129],{"id":1128},"本地好看线上字体很慢","本地好看，线上字体很慢",[21,1131,1132],{},"优先检查：",[29,1134,1135,1138,1141,1144],{},[32,1136,1137],{},"是否用了过多字重",[32,1139,1140],{},"是否加载了完整字符集",[32,1142,1143],{},"是否能改为自托管",[32,1145,1146],{},"是否给关键字体做了预加载",[274,1148,1149],{"id":1149},"图标风格不统一",[21,1151,1152],{},"通常是因为不同组件来源不一致。更稳的做法是：",[29,1154,1155,1158,1161],{},[32,1156,1157],{},"选定一个主图标库",[32,1159,1160],{},"只在少数品牌图标场景引入第二套",[32,1162,1163],{},"给图标尺寸、线宽和语义命名定规则",[274,1165,1167],{"id":1166},"为什么-favicon-改了却不生效","为什么 Favicon 改了却不生效",[21,1169,1170],{},"浏览器缓存很重，优先尝试：",[29,1172,1173,1176,1179],{},[32,1174,1175],{},"强制刷新",[32,1177,1178],{},"文件名加版本",[32,1180,1181],{},"检查不同平台是否还在读旧的 PNG \u002F Apple 图标",[25,1183,1184],{"id":1184},"风险提醒",[29,1186,1187,1190,1193],{},[32,1188,1189],{},"商用项目要确认字体和图标授权范围",[32,1191,1192],{},"不要为了“看起来丰富”而加载大量无用字重和图标资源",[32,1194,1195],{},"中文字体体积很大，Web 场景尤其要控制加载成本",[25,1197,1198],{"id":1198},"延伸阅读",[29,1200,1201,1207,1213],{},[32,1202,1203],{},[94,1204,1206],{"href":1205},"\u002Fdocs\u002Fdesign-resources","设计资源库",[32,1208,1209],{},[94,1210,1212],{"href":1211},"\u002Fdocs\u002Fimage-video-processing","图像与视频处理",[32,1214,1215],{},[94,1216,1218],{"href":1217},"\u002Fdocs\u002Ftailwindcss-unocss","UnoCSS \u002F Tailwind CSS 速查",[25,1220,1221],{"id":1221},"参考链接",[29,1223,1224,1231,1237,1244],{},[32,1225,1226,1230],{},[94,1227,277],{"href":1228,"rel":1229},"https:\u002F\u002Ffonts.google.com\u002F",[98]," — 免费字体",[32,1232,1233,1236],{},[94,1234,385],{"href":383,"rel":1235},[98]," — 自托管字体",[32,1238,1239,1243],{},[94,1240,661],{"href":1241,"rel":1242},"https:\u002F\u002Ficonify.design\u002F",[98]," — 图标框架",[32,1245,1246,1251],{},[94,1247,1250],{"href":1248,"rel":1249},"https:\u002F\u002Fwww.nerdfonts.com\u002F",[98],"Nerd Fonts"," — 终端字体补丁",[1253,1254,1255],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":157,"searchDepth":172,"depth":172,"links":1257},[1258,1259,1260,1261,1266,1267,1273,1274,1279,1280,1281],{"id":27,"depth":172,"text":27},{"id":68,"depth":172,"text":68},{"id":207,"depth":172,"text":207},{"id":271,"depth":172,"text":272,"children":1262},[1263,1264,1265],{"id":276,"depth":186,"text":277},{"id":376,"depth":186,"text":377},{"id":425,"depth":186,"text":425},{"id":578,"depth":172,"text":578},{"id":601,"depth":172,"text":601,"children":1268},[1269,1270,1271,1272],{"id":604,"depth":186,"text":605},{"id":665,"depth":186,"text":666},{"id":767,"depth":186,"text":767},{"id":841,"depth":186,"text":842},{"id":982,"depth":172,"text":983},{"id":1125,"depth":172,"text":1125,"children":1275},[1276,1277,1278],{"id":1128,"depth":186,"text":1129},{"id":1149,"depth":186,"text":1149},{"id":1166,"depth":186,"text":1167},{"id":1184,"depth":172,"text":1184},{"id":1198,"depth":172,"text":1198},{"id":1221,"depth":172,"text":1221},{"path":1283,"title":1284,"description":1285,"docType":8,"resourceKind":9,"categoryId":1286,"categoryLabel":1287,"updatedAt":12,"publishedAt":12,"icon":1288},"\u002Fdocs\u002Flive-recording","直播录制工具","抖音、TikTok、YouTube、Nico、B站等平台直播录制工具汇总","media-creation","媒体与创作","i-carbon-media-library",{"path":1290,"title":1291,"description":1292,"docType":8,"resourceKind":9,"categoryId":1293,"categoryLabel":1294,"updatedAt":12,"publishedAt":12,"icon":1295},"\u002Fdocs\u002Fprompt-engineering","AI 提示词工程","ChatGPT\u002FClaude 提示词技巧、角色设定、思维链与常用模板","ai-tools","AI 工具","i-carbon-chat-bot",[1297,1298,1299],"希望把零散经验整理成长期可复用工作流的人","希望快速筛选在线服务并减少信息噪音的人","希望阅读时顺手建立自己的操作清单或收藏体系的人",[1301,1302,1303],"先浏览标题、摘要和目录，带着问题阅读会更高效","确认要上传的数据是否敏感，并优先使用临时数据做首次验证","如果页面里提到相关文档，尽量一起打开对照，效果通常更完整",[1305,1310,1314,1318],{"path":1306,"title":1307,"description":1308,"docType":8,"resourceKind":9,"categoryId":10,"categoryLabel":11,"updatedAt":1309,"publishedAt":1309,"icon":13},"\u002Fdocs\u002Fbrowser-extensions","浏览器扩展推荐","开发调试、效率提升、隐私安全与阅读增强场景下的浏览器扩展选择建议","2026-03-10",{"path":1205,"title":1311,"description":1312,"docType":8,"resourceKind":9,"categoryId":10,"categoryLabel":11,"updatedAt":1313,"publishedAt":1313,"icon":13},"设计资源与工具","配色工具、UI 组件库、设计灵感、免费素材与原型工具","2026-02-28",{"path":1315,"title":1316,"description":1317,"docType":8,"resourceKind":9,"categoryId":10,"categoryLabel":11,"updatedAt":12,"publishedAt":12,"icon":13},"\u002Fdocs\u002Fweb-scraping","网页抓取与自动化","Puppeteer、Playwright、curl 抓取技巧与反爬应对",{"path":1319,"title":1320,"description":1321,"docType":8,"resourceKind":9,"categoryId":10,"categoryLabel":11,"updatedAt":12,"publishedAt":12,"icon":13},"\u002Fdocs\u002Fregex-cheatsheet","正则表达式速查","正则表达式语法速查、常用模式、在线测试工具与各语言示例",1776215712958]