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