https://vuetifyjs.com/assets/text-and-typography-DZDPcsSf.js

1import{M as m,u as b,v as t,I as e,bJ as s,H as n,b_ as o,bW as y,bV as k,bU as v,bT as w,bX as h,aL as z,ca as S,cb as C}from"./index-DcDh_618.js";import{_ as V}from"./Example.vue_vue_type_script_setup_true_lang-DDQEtvIo.js";import"./@vuetify-examples-CdukBs3f.js";import"./new-in-CT2u0ctm.js";import"./upperFirst-nFmnOqP0.js";const T={id:"section-6587672c548c63927248-text-and-typography"},$={id:"section-4f7f7528"},L={id:"section-65ad70b9"},F={id:"section-5f3a8c035b574f53"},R={id:"section-6587672c"},U={id:"section-5bf99f50"},M={id:"section-88c599707ebf"},A={id:"section-4e0d900f660e5ea6"},B={id:"section-53d85f62"},I={id:"section-6587672c6362884c548c6ea251fa"},N={id:"customizing-fonts"},j={id:"loading-custom-fonts"},D={id:"configuring-vuetify"},q={id:"using-css-variables"},Y={id:"rtl-5bf99f50"},G={meta:{title:"文本和排版 (Text and typography)",description:"View the various typography styles. From display to labels, with various weights, sizes and italics.",keywords:"排版, 页头, 标题, 文本"},
2features:{report:!0,spec:"https://m3.material.io/styles/typography/type-scale-tokens"},related:["/styles/display/","/styles/content/","/features/internationalization/"],toc:[{text:"使用",to:"#section-4f7f7528",level:2},{text:"断点",to:"#section-65ad70b9",level:3},{text:"强调字体",to:"#section-5f3a8c035b574f53",level:3},{text:"文本",to:"#section-6587672c",level:2},{text:"对齐",to:"#section-5bf99f50",level:3},{text:"装饰线",to:"#section-88c599707ebf",level:3},{text:"不透明度",to:"#section-4e0d900f660e5ea6",level:3},{text:"变形",to:"#section-53d85f62",level:3},{text:"文本换行和溢出",to:"#section-6587672c6362884c548c6ea251fa",level:3},{text:"Customizing Fonts",to:"#customizing-fonts",level:2},{text:"Loading Custom Fonts",to:"#loading-custom-fonts",level:3},{text:"Configuring Vuetify",to:"#configuring-vuetify",level:3},{text:"Using CSS Variables",to:"#using-css-variables",level:3},{text:"RTL 对齐",to:"#rtl-5bf99f50",level:2}]},K="",Q=m({__name:"text-and-typogra\
3phy",setup(E,{expose:d}){return d({frontmatter:{meta:{title:"文本和排版 (Text and typography)",description:"View the various typography styles. From display to labels, with various weights, sizes and italics.",keywords:"排版, 页头, 标题, 文本"},features:{report:!0,spec:"https://m3.material.io/styles/typography/type-scale-tokens"},related:["/styles/display/","/styles/content/","/features/internationalization/"],toc:[{text:"使用",to:"#section-4f7f7528",level:2},{text:"断点",to:"#section-65ad70b9",level:3},{text:"强调字体",to:"#section-5f3a8c035b574f53",level:3},{text:"文本",to:"#section-6587672c",level:2},{text:"对齐",to:"#section-5bf99f50",level:3},{text:"装饰线",to:"#section-88c599707ebf",level:3},{text:"不透明度",to:"#section-4e0d900f660e5ea6",level:3},{text:"变形",to:"#section-53d85f62",level:3},{text:"文本换行和溢出",to:"#section-6587672c6362884c548c6ea251fa",level:3},{text:"Customizing Fonts",to:"#customizing-fonts",level:2},{text:"Loading C\
4ustom Fonts",to:"#loading-custom-fonts",level:3},{text:"Configuring Vuetify",to:"#configuring-vuetify",level:3},{text:"Using CSS Variables",to:"#using-css-variables",level:3},{text:"RTL 对齐",to:"#rtl-5bf99f50",level:2}]},excerpt:void 0}),(H,l)=>{const i=y,u=k,p=S,f=v,g=C,r=V,x=w,a=h;return z(),b("div",null,[t("section",T,[e(i,{href:"#section-6587672c548c63927248-text-and-typography",level:"1"},{default:s(()=>[...l[0]||(l[0]=[n("文本和排版 (Text and typography)",-1)])]),_:1}),t("p",null,[l[2]||(l[2]=n("Control text size, alignment, wrapping, overflow, transforms and more. By default, Vuetify uses the Material Design 3 specification ",-1)),e(u,{href:"https://fonts.google.com/specimen/Roboto"},{default:s(()=>[...l[1]||(l[1]=[n("Roboto Font",-1)])]),_:1}),l[3]||(l[3]=n(".",-1))]),e(p),e(f,null,{default:s(()=>[...l[4]||(l[4]=[t("thead",null,[t("tr",null,[t("th",null,"类"),t("th",null,"Properties")])],-1),t("tbody",null,[t("tr",null,[t("td",null,[t("strong",null,"text-display-large")]),
5t("td",null,[n("font-size: 3.5625rem (57px);"),t("br"),n("font-weight: 400;"),t("br"),n("line-height: 4rem (64px);"),t("br"),n("letter-spacing: -0.015625rem (-0.25px);")])]),t("tr",null,[t("td",null,[t("strong",null,"text-display-medium")]),t("td",null,[n("font-size: 2.8125rem (45px);"),t("br"),n("font-weight: 400;"),t("br"),n("line-height: 3.25rem (52px);"),t("br"),n("letter-spacing: 0;")])]),t("tr",null,[t("td",null,[t("strong",null,"text-display-small")

5]),t("td",null,[n("font-size: 2.25rem (36px);"),t("br"),n("font-weight: 400;"),t("br"),n("line-height: 2.75rem (44px);"),t("br"),n("letter-spacing: 0;")])]),t("tr",null,[t("td",null,[t("strong",null,"text-headline-large")]),t("td",null,[n("font-size: 2rem (32px);"),t("br"),n("font-weight: 400;"),t("br"),n("line-height: 2.5rem (40px);"),t("br"),n("letter-spacing: 0;")])]),t("tr",null,[t("td",null,[t("strong",null,"text-headline-medium")]),t("td",null,[n("font-size: 1.75rem (28px);"),t("br"),n("font-weight: 400;"),t("br"),n("line-height\
6: 2.25rem (36px);"),t("br"),n("letter-spacing: 0;")])]),t("tr",null,[t("td",null,[t("strong",null,"text-headline-small")]),t("td",null,[n("font-size: 1.5rem (24px);"),t("br"),n("font-weight: 400;"),t("br"),n("line-height: 2rem (32px);"),t("br"),n("letter-spacing: 0;")])]),t("tr",null,[t("td",null,[t("strong",null,"text-title-large")]),t("td",null,[n("font-size: 1.375rem (22px);"),t("br"),n("font-weight: 400;"),t("br"),n("line-height: 1.75rem (28px);"),t("br"),n("letter-spacing: 0;")])]),t("tr",null,[t("td",null,[t("strong",null,"text-title-medium")]),t("td",null,[n("font-size: 1rem (16px);"),t("br"),n("font-weight: 500;"),t("br"),n("line-height: 1.5rem (24px);"),t("br"),n("letter-spacing: 0.009375rem (0.15px);")])]),t("tr",null,[t("td",null,[t("strong",null,"text-title-small")]),t("td",null,[n("font-size: 0.875rem (14px);"),t("br"),n("font-weight: 500;"),t("br"),n("line-height: 1.25rem (20px);"),t("br"),n("letter-spacing: 0.00625rem (0.1px);")])]),t("tr",null,[t("td",null,[t("strong",null,
7"text-body-large")]),t("td",null,[n("font-size: 1rem (16px);"),t("br"),n("font-weight: 400;"),t("br"),n("line-height: 1.5rem (24px);"),t("br"),n("letter-spacing: 0.03125rem (0.5px);")])]),t("tr",null,[t("td",null,[t("strong",null,"text-body-medium")]),t("td",null,[n("font-size: 0.875rem (14px);"),t("br"),n("font-weight: 400;"),t("br"),n("line-height: 1.25rem (20px);"),t("br"),n("letter-spacing: 0.015625rem (0.25px);")])]),t("tr",null,[t("td",null,[t("strong",null,"text-body-small")]),t("td",null,[n("font-size: 0.75rem (12px);"),t("br"),n("font-weight: 400;"),t("br"),n("line-height: 1rem (16px);"),t("br"),n("letter-spacing: 0.025rem (0.4px);")])]),t("tr",null,[t("td",null,[t("strong",null,"text-label-large")]),t("td",null,[n("font-size: 0.875rem (14px);"),t("br"),n("font-weight: 500;"),t("br"),n("line-height: 1.25rem (20px);"),t("br"),n("letter-spacing: 0.00625rem (0.1px);")])]),t("tr",null,[t("td",null,[t("strong",null,"text-label-medium")]),t("td",null,[n("font-size: 0.75rem (12px);"),
8t("br"),n("font-weight: 500;"),t("br"),n("line-height: 1rem (16px);"),t("br"),n("letter-spacing: 0.03125rem (0.5px);")])]),t("tr",null,[t("td",null,[t("strong",null,"text-label-small")]),t("td",null,[n("font-size: 0.6875rem (11px);"),t("br"),n("font-weight: 500;"),t("br"),n("line-height: 1rem (16px);"),t("br"),n("letter-spacing: 0.03125rem (0.5px);")])]),t("tr",null,[t("td",null,[t("strong",null,"text-high-emphasis")]),t("td",null,"color: rgba(var(–v-theme-on-background), var(–v-high-emphasis-opacity));")]),t("tr",null,[t("td",null,[t("strong",null,"text-medium-emphasis")]),t("td",null,"color: rgba(var(–v-theme-on-background), var(–v-medium-emphasis-opacity));")]),t("tr",null,[t("td",null,[t("strong",null,"text-disabled")]),t("td",null,"color: rgba(var(–v-theme-on-background), var(–v-disabled-opacity));")]),t("tr",null,[t("td",null,[t("strong",null,"text-uppercase")]),t("td",null,"text-transform: uppercase;")]),t("tr",null,[t("td",null,[t("strong",null,"text-lowercase")]),t(
9"td",null,"text-transform: lowercase;")]),t("tr",null,[t("td",null,[t("strong",null,"text-capitalize")]),t("td",null,"text-transform: capitalize;")]),t("tr",null,[t("td",null,[t("strong",null,"text-none")]),t("td",null,"text-transform: none;")]),t("tr",null,[t("td",null,[t("strong",null,"text-start")]),t("td",null,"text-align: start;")]),t("tr",null,[t("td",null,[t("strong",null,"text-center")]),t("td",null,"text-align: center;

9")]),t("tr",null,[t("td",null,[t("strong",null,"text-end")]),t("td",null,"text-align: end;")]),t("tr",null,[t("td",null,[t("strong",null,"text-justify")]),t("td",null,"text-align: justify;")]),t("tr",null,[t("td",null,[t("strong",null,"text-left")]),t("td",null,"text-align: left;")]),t("tr",null,[t("td",null,[t("strong",null,"text-right")]),t("td",null,"text-align: right;")]),t("tr",null,[t("td",null,[t("strong",null,"text-truncate")]),t("td",null,[n("overflow: hidden;"),t("br"),n("text-overflow: ellipsis;"),t("br"),n("white-space: nowrap;")])]),t("tr",null,[t("t\
10d",null,[t("strong",null,"text-no-wrap")]),t("td",null,"white-space: nowrap;")]),t("tr",null,[t("td",null,[t("strong",null,"text-pre-wrap")]),t("td",null,"white-space: pre-wrap;")]),t("tr",null,[t("td",null,[t("strong",null,"text-break")]),t("td",null,"overflow-wrap: break-word;")]),t("tr",null,[t("td",null,[t("strong",null,"text-decoration-none")]),t("td",null,"text-decoration: none;")]),t("tr",null,[t("td",null,[t("strong",null,"text-decoration-overline")]),t("td",null,"text-decoration: overline;")]),t("tr",null,[t("td",null,[t("strong",null,"text-decoration-underline")]),t("td",null,"text-decoration: underline;")]),t("tr",null,[t("td",null,[t("strong",null,"text-decoration-line-through")]),t("td",null,"text-decoration: line-through;")]),t("tr",null,[t("td",null,[t("strong",null,"font-weight-black")]),t("td",null,"font-weight: 900;")]),t("tr",null,[t("td",null,[t("strong",null,"font-weight-bold")]),t("td",null,"font-weight: 700;")]),t("tr",null,[t("td",null,[t("strong",null,"font-wei\
11ght-semibold")]),t("td",null,"font-weight: 600;")]),t("tr",null,[t("td",null,[t("strong",null,"font-weight-medium")]),t("td",null,"font-weight: 500;")]),t("tr",null,[t("td",null,[t("strong",null,"font-weight-regular")]),t("td",null,"font-weight: 400;")]),t("tr",null,[t("td",null,[t("strong",null,"font-weight-light")]),t("td",null,"font-weight: 300;")]),t("tr",null,[t("td",null,[t("strong",null,"font-weight-thin")]),t("td",null,"font-weight: 100;")]),t("tr",null,[t("td",null,[t("strong",null,"font-italic")]),t("td",null,"font-style: italic;")]),t("tr",null,[t("td",null,[t("strong",null,"text-{breakpoint}-display-large")]),t("td",null,"Set the text-display-large style for the specified breakpoint.")]),t("tr",null,[t("td",null,[t("strong",null,"text-{breakpoint}-display-medium")]),t("td",null,"Set the text-display-medium style for the specified breakpoint.")]),t("tr",null,[t("td",null,[t("strong",null,"text-{breakpoint}-display-small")]),t("td",null,"Set the text-display-small style for t\
12he specified breakpoint.")]),t("tr",null,[t("td",null,[t("strong",null,"text-{breakpoint}-headline-large")]),t("td",null,"Set the text-headline-large style for the specified breakpoint.")]),t("tr",null,[t("td",null,[t("strong",null,"text-{breakpoint}-headline-medium")]),t("td",null,"Set the text-headline-medium style for the specified breakpoint.")]),t("tr",null,[t("td",null,[t("strong",null,"text-{breakpoint}-headline-small")]),t("td",null,"Set the text-headline-small style for the specified breakpoint.")]),t("tr",null,[t("td",null,[t("strong",null,"text-{breakpoint}-title-large")]),t("td",null,"Set the text-title-large style for the specified breakpoint.")]),t("tr",null,[t("td",null,[t("strong",null,"text-{breakpoint}-title-medium")]),t("td",null,"Set the text-title-medium style for the specified breakpoint.")]),t("tr",null,[t("td",null,[t("strong",null,"text-{breakpoint}-title-small")]),t("td",null,"Set the text-title-small style for the specified breakpoint.")]),t("tr",null,[t("td",
13null,[t("strong",null,"text-{breakpoint}-body-large")]),t("td",null,"Set the text-body-large style for the specified breakpoint.")]),t("tr",null,[t("td",null,[t("strong",null,"text-{breakpoint}-body-medium")]),t("td",null,"Set the text-body-medium style for the specified breakpoint.")]),t("tr",null,[t("td",null,[t("strong",null,"text-{breakpoint}-body-small")]),t("td",null,"Set the text-body-small style for the specified breakpoint.")]),t("tr",null,[t("td",null,[t("strong",null,"text-{breakpoint}-label-large")]),t("td",null,"Set the text-label-large style for the specified breakpoint.")]),t("tr",null,[t("td",null,[t("strong",null,"text-{breakpoint}-label-medium")]),t("td",null,"Set the text-label-medium style for the specified breakpoint.")]),t("tr",null,[t("td",null,[t("strong",null,"text-{breakpoint}-label-small")]),t("td",{style:{"max-height":"600px"},"fixed-header":""},"Set the text-label-small style for the specified breakpoint.")])],-1)])]),_:1}),e(g),t("section",$,[e(i,{href:"#s\
14ection-4f7f7528",level:"2"},{default:s(()=>[...l[5]||(l[5]=[n("使用",-1)])]),_:1}

14),t("p",null,[l[7]||(l[7]=n("Control the size and style of text using the Typography helper classes. These values are based upon the ",-1)),e(u,{href:"https://m3.material.io/styles/typography/type-scale-tokens"},{default:s(()=>[...l[6]||(l[6]=[n("Material Design type specification",-1)])]),_:1}),l[8]||(l[8]=n(".",-1))]),e(r,{file:"text-and-typography/typography"}),t("section",L,[e(i,{href:"#section-65ad70b9",level:"3"},{default:s(()=>[...l[9]||(l[9]=[n("断点",-1)])]),_:1}),t("p",null,[l[17]||(l[17]=n("All of the typography classes support the responsive breakpoints seen in other parts of the framework. The base class ",-1)),e(o,null,{default:s(()=>[...l[10]||(l[10]=[n(".text-{variant}",-1)])]),_:1}),l[18]||(l[18]=n(" corresponds to the ",-1)),e(o,null,{default:s(()=>[...l[11]||(l[11]=[n("xsAndUp",-1)])]),_:1}),l[19]||(l[19]=n(" breakpoint, while the classes ",-1)),e(o,null,{default:s(()=>[...l[12]||(l[12]=
15[n(".text-{breakpoint}-{variant}",-1)])]),_:1}),l[20]||(l[20]=n(" can be used for the rest of the breakpoints (",-1)),e(o,null,{default:s(()=>[...l[13]||(l[13]=[n("sm",-1)])]),_:1}),l[21]||(l[21]=n(", ",-1)),e(o,null,{default:s(()=>[...l[14]||(l[14]=[n("md",-1)])]),_:1}),l[22]||(l[22]=n(", ",-1)),e(o,null,{default:s(()=>[...l[15]||(l[15]=[n("lg",-1)])]),_:1}),l[23]||(l[23]=n(" and ",-1)),e(o,null,{default:s(()=>[...l[16]||(l[16]=[n("xl",-1)])]),_:1}),l[24]||(l[24]=n(").",-1))]),l[25]||(l[25]=t("p",null,"下面的示例显示了如何使用不同的类来实现一个略微精心设计的示例：",-1)),e(r,{file:"text-and-typography/typography-breakpoints"})]),t("section",F,[e(i,{href:"#section-5f3a8c035b574f53",level:"3"},{default:s(()=>[...l[26]||(l[26]=[n("强调字体",-1)])]),_:1}),l[27]||(l[27]=t("p",null,[n("Material design, by default, supports "),t("strong",null,"100, 300, 400, 500, 700, 900"),n(" font weights and italicized text.")],-1)),e(r,{file:"text-and-typography/font-emp\
16hasis"})])]),t("section",R,[e(i,{href:"#section-6587672c",level:"2"},{default:s(()=>[...l[28]||(l[28]=[n("文本",-1)])]),_:1}),t("section",U,[e(i,{href:"#section-5bf99f50",level:"3"},{default:s(()=>[...l[29]||(l[29]=[n("对齐",-1)])]),_:1}),l[30]||(l[30]=t("p",null,"Alignment 助手类允许你轻松的创建 re-align 文本。",-1)),e(r,{file:"text-and-typography/text-alignment"}),l[31]||(l[31]=t("p",null,"对齐类也支持响应式断点。",-1)),e(r,{file:"text-and-typography/text-alignment-responsive"})]),t("section",M,[e(i,{href:"#section-88c599707ebf",level:"3"},{default:s(()=>[...l[32]||(l[32]=[n("装饰线",-1)])]),_:1}),t("p",null,[l[37]||(l[37]=n("Remove text decoration with the ",-1)),e(o,null,{default:s(()=>[...l[33]||(l[33]=[n(".text-decoration-none",-1)])]),_:1}),l[38]||(l[38]=n(" class or add an ",-1)),l[39]||(l[39]=t("span",{style:{"text-decoration":"underline"}},"overline, underline or line-through",-1)),l[40]||(l[40]=n(" by using ",-1)),e(o,null,{default:s(()=>[...l[34]||
17(l[34]=[n(".text-decoration-overline",-1)])]),_:1}),l[41]||(l[41]=n(", ",-1)),e(o,null,{default:s(()=>[...l[35]||(l[35]=[n(".text-decoration-underline",-1)])]),_:1}),l[42]||(l[42]=n(", and ",-1)),e(o,null,{default:s(()=>[...l[36]||(l[36]=[n(".text-decoration-line-through",-1)])]),_:1}),l[43]||(l[43]=n(".",-1))]),e(r,{file:"text-and-typography/text-decoration"})]),t("section",A,[e(i,{href:"#section-4e0d900f660e5ea6",level:"3"},{default:s(()=>[...l[44]||(l[44]=[n("不透明度",-1)])]),_:1}),t("p",null,[l[48]||(l[48]=n("Opacity helper classes allow you to easily adjust the emphasis of text. ",-1)),e(o,null,{default:s(()=>[...l[45]||(l[45]=[n("text-high-emphasis",-1)])]),_:1}),l[49]||(l[49]=n(" has the same opacity as default text. ",-1)),e(o,null,{default:s(()=>[...l[46]||(l[46]=[n("text-medium-emphasis",-1)])]),_:1}),l[50]||(l[50]=n(" is used for hints and helper text. De-emphasize text with ",-1)),e(o,null,{default:s(()=>[...l[47]||(l[47]=[n("text-disabled",-1)])]),_:1}),l[51]||(l[51]=
18n(".",-1))]),e(r,{file:"text-and-typography/text-opacity"})]),t("section",B,[e(i,{href:"#section-53d85f62",level:"3"},{default:s(()=>[...l[52]||(l[52]=[n("变形",-1)])]),_:1}),l[58]||(l[58]=t("p",null,"文本 capitalization 类可以转换文字的大小写。",-1)),e(r,{file:"text-and-typography/text-transform"}),t("p",null,[l[55]||(l[55]=n("Text breaking and the removal of ",-1)),e(o,null,{default:s(()=>[...l[53]||(l[53]=[n("text-transform",-1)])]),_:1}

18),l[56]||(l[56]=n(" is also possible. In the first example, the ",-1)),e(o,null,{default:s(()=>[...l[54]||(l[54]=[n("text-transform: uppercase",-1)])]),_:1}),l[57]||(l[57]=n(" custom class is overwritten and allows the text casing to remain. In the second example, we break up a longer word to fit the available space.",-1))]),e(r,{file:"text-and-typography/text-break"})]),t("section",I,[e(i,{href:"#section-6587672c6362884c548c6ea251fa",level:"3"},{default:s(()=>[...l[59]||(l[59]=[n("文本换行和溢出",-1)])]),_:1}),t("p",null,[l[61]||
19(l[61]=n("You can prevent wrapping text with the ",-1)),e(o,null,{default:s(()=>[...l[60]||(l[60]=[n(".text-no-wrap",-1)])]),_:1}),l[62]||(l[62]=n(" utility class.",-1))]),e(r,{file:"text-and-typography/text-no-wrap"}),t("p",null,[l[64]||(l[64]=n("Longer content can be truncated with a text ellipsis using the ",-1)),e(o,null,{default:s(()=>[...l[63]||(l[63]=[n(".text-truncate",-1)])]),_:1}),l[65]||(l[65]=n(" utility class.",-1))]),e(x,{type:"info"},{default:s(()=>[t("p",null,[l[68]||(l[68]=t("strong",null,"Requires",-1)),l[69]||(l[69]=n()),e(o,null,{default:s(()=>[...l[66]||(l[66]=[n("display: inline-block",-1)])]),_:1}),l[70]||(l[70]=n()),l[71]||(l[71]=t("strong",null,"or",-1)),l[72]||(l[72]=n()),e(o,null,{default:s(()=>[...l[67]||(l[67]=[n("display: block",-1)])]),_:1}),l[73]||(l[73]=n(".",-1))])]),_:1}),e(r,{file:"text-and-typography/text-truncate"})])]),t("section",N,[e(i,{href:"#customizing-fonts",level:"2"},{default:s(()=>[...l[74]||(l[74]=[n("Customizing Fonts",-1)])]),_:1}),l[104]||
20(l[104]=t("p",null,[n("By default, Vuetify uses "),t("strong",null,"Roboto"),n(" as font family for regular text and headings. You can customize the font-family by overriding the following SASS variables:")],-1)),t("ul",null,[t("li",null,[e(o,null,{default:s(()=>[...l[75]||(l[75]=[n("$body-font-family",-1)])]),_:1}),l[76]||(l[76]=n(" — Used for body text and most components",-1))]),t("li",null,[e(o,null,{default:s(()=>[...l[77]||(l[77]=[n("$heading-font-family",-1)])]),_:1}),l[79]||(l[79]=n(" — Used for headings. (defaults to ",-1)),e(o,null,{default:s(()=>[...l[78]||(l[78]=[n("$body-font-family",-1)])]),_:1}),l[80]||(l[80]=n(")",-1))])]),t("section",j,[e(i,{href:"#loading-custom-fonts",level:"3"},{default:s(()=>[...l[81]||(l[81]=[n("Loading Custom Fonts",-1)])]),_:1}),l[95]||(l[95]=t("p",null,"Before configuring Vuetify, ensure your chosen font is available in your application. There are several ways to load fonts:",-1)),t("ul",null,[t("li",null,[l[84]||(l[84]=t("strong",null,"Fon\
21ts from CDN",-1)),l[85]||(l[85]=n(" — Add an ",-1)),e(o,null,{default:s(()=>[...l[82]||(l[82]=[n("@import",-1)])]),_:1}),l[86]||(l[86]=n(" in your CSS or a ",-1)),e(o,null,{default:s(()=>[...l[83]||(l[83]=[n("<link>",-1)])]),_:1}),l[87]||(l[87]=n(" tag in your HTML",-1))]),t("li",null,[l[89]||(l[89]=t("strong",null,"Local font files",-1)),l[90]||(l[90]=n(" — Use ",-1)),e(o,null,{default:s(()=>[...l[88]||(l[88]=[n("@font-face",-1)])]),_:1}),l[91]||(l[91]=n(" declarations",-1))]),t("li",null,[l[93]||(l[93]=t("strong",null,"NPM packages",-1)),l[94]||(l[94]=n(" — Install packages like ",-1)),e(o,null,{default:s(()=>[...l[92]||(l[92]=[n("@fontsource/open-sans",-1)])]),_:1})])])]),t("section",D,[e(i,{href:"#configuring-vuetify",level:"3"},{default:s(()=>[...l[96]||(l[96]=[n("Configuring Vuetify",-1)])]),_:1}),t("p",null,[l[98]||(l[98]=n("Ensure you have ",-1)),e(u,{href:"/features/sass-variables"},{default:s(()=>[...l[97]||(l[97]=[n("SASS Variables",-1)])]),_:1}),l[99]||(l[99]=n(" conf\
22igured in your project, then set the font-family variables:",-1))]),e(a,{resource:"src/styles/settings.scss",language:"scss",class:"mb-4"},{default:s(()=>[...l[100]||(l[100]=[t("pre",{class:"language-scss"},[t("code",{resource:"src/styles/settings.scss",class:"language-scss"},[t("span",{class:"token keyword"},"@use"),n(),t("span",{class:"token string"},"'sass:string'"),t("span",{class:"token punctuation"},";"),n(`
23`),t("span",{class:"token keyword"},"@use"),n(),t("span",{class:"token string"},"'vuetify/settings'"),n(),t("span",{class:"token module-modifier keyword"},"with"),n(),t("span",{class:"token punctuation"},"("),n(`
24  `),t("span",{class:"token property"},[t("span",{class:"token variable"},"$body-font-family")]),t("span",{class:"token punctuation"},":"),n(" string."),t("span",{class:"token function"},"unquote"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},`'"Open Sans", sans-serif'`),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),n(`
25  `),t("span",{class:"token property"},[t("span",{class:"token variable"},"$heading-font-family")]),t("span",{class:"token punctuation"},":"),n(" string."),t("span",{class:"token function"},"unquote"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},`'"Montserrat", sans-serif'`),t("span",{class:"token punctuation"},")"),n(`
26`),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),n(`
27`)])],-1)])]),_:1})]),t("section",q,[e(i,{href:"#using-css-variables",level:"3"},{default:s(()=>[...l[101]||(l[101]=[n("Using CSS Variables",-1)])]),_:1}),l[103]||(l[103]=t("p",null,"You can use CSS custom properties for font-family values, allowing runtime changes or integration with theming systems:",-1)),e(a,{resource:"src/styles/settings.scss",language:"scss",class:"mb-4"},{default:s(()=>[...l[102]||(l[102]=[t("pre",{class:"language-scss"}

27,[t("code",{resource:"src/styles/settings.scss",class:"language-scss"},[t("span",{class:"token keyword"},"@use"),n(),t("span",{class:"token string"},"'vuetify/settings'"),n(),t("span",{class:"token module-modifier keyword"},"with"),n(),t("span",{class:"token punctuation"},"("),n(`
28  `),t("span",{class:"token property"},[t("span",{class:"token variable"},"$body-font-family")]),t("span",{class:"token punctuation"},":"),n(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),n("--font-sans"),t("span",{class:"token punctuation"},")"),n(`
29  `),t("span",{class:"token comment"},"// $heading-font-family inherits the same font in this example"),n(`
30`),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),n(`
31`)])],-1)])]),_:1})])]),t("section",Y,[e(i,{href:"#rtl-5bf99f50",level:"2"},{default:s(()=>[...l[105]||(l[105]=[n("RTL 对齐",-1)])]),_:1}),t("p",null,[l[109]||(l[109]=n("When using ",-1)),e(u,{href:"/features/bidirectionality"},{default:s(()=>[...l[106]||(l[106]=[n("RTL",-1)])]),_:1}),l[110]||(l[110]=n(", you may want to keep the alignment regardless of current text direction. This can be achieved by setting the direction to either ",-1)),e(o,null,{default:s(()=>[...l[107]||(l[107]=[n("left",-1)])]),_:1}),l[111]||(l[111]=n(" or ",-1)),e(o,null,{default:s(()=>[...l[108]||(l[108]=[n("right",-1)])]),_:1}),l[112]||(l[112]=n(".",-1))]),t("p",null,[l[115]||(l[115]=n("If instead you want the alignment to respond to the current text direction, use ",-1)),e(o,null,{default:s(()=>[...l[113]||(l[113]=[n("start",-1)])]),_:1}),l[116]||(l[116]=n(" and ",-1)),e(o,null,{default:s(()=>[...l[114]||(l[114]=[n("end",-1)])]),_:1}),l[117]||(l[117]=n(".",-1))]),e(r,{file:"text-and-typography/text-rtl"})])])])}}});export{Q as default,K as excerpt,G as frontmatter};
32//# sourceMappingURL=text-and-typography-DZDPcsSf.js.map