以下章节介绍 Quasar 提供的字体排版相关功能。
标题
text-h1
h1
Headline 1
text-h2
h2
Headline 2
text-h3
h3
Headline 3
text-h4
h4
Headline 4
text-h5
h5
Headline 5
text-h6
h6
Headline 6
text-subtitle1
Subtitle 1
text-subtitle2
Subtitle 2
text-body1
Body 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
text-body2
Body 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque, possimus nihil molestias sapiente necessitatibus dolor saepe inventore, soluta id accusantium voluptas beatae.
text-caption
Caption text
text-overline
Overline
字重
text-weight-thin
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
text-weight-light
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
text-weight-regular
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
text-weight-medium
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
text-weight-bold
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
text-weight-bolder
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
CSS 辅助类
| 类名 | 描述 |
|---|---|
text-right | 文字右对齐 |
text-left | 文字左对齐 |
text-center | 文字居中对齐 |
text-justify | 文字两端对齐 |
text-bold | 文字加粗 |
text-italic | 文字斜体 |
text-no-wrap | 文字不换行（应用 white-space: nowrap） |
text-strike | 文字删除线（应用 text-decoration: line-through） |
text-uppercase | 文字转换为大写 |
text-lowercase | 文字转换为小写 |
text-capitalize | 首字母大写 |
默认字体
默认内嵌的网页字体是 Roboto。但这不是必需的，您可以使用任何您喜欢的字体。
Roboto 以可变字体（variable font）形式提供，因此从 100 到 900 之间的任意 font-weight 都可用。它覆盖拉丁文、拉丁文扩展、西里尔文、希腊文和越南文字，并按子集拆分，浏览器只在页面用到时才下载相应子集。
如果您想移除默认的 Roboto 字体，请编辑以下配置：
extras: ["roboto-font"];添加自定义字体
您还可以引入其他字体在应用中使用。以下是其中一种方式：
- 将您的字体文件
[customfont].woff2（或其他格式；woff2被所有浏览器支持且体积最小）复制到项目目录中，例如：./src/css/fonts/[customfont.woff2] - 在
./src/css/app.{css|sass|scss|styl}中声明字体（或在其他合适的位置，但请确保字体文件的相对路径正确）：
@font-face {
font-family: customfont;
src: url(./fonts/customfont.woff2);
}
// 声明一个 CSS 类来使用这个字体
.my-font {
font-family: "customfont";
}- 然后在需要的地方使用该类即可。