排版(Typography)

我们将在以下各节中处理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使文本的第一个字母大写

默认字体

嵌入的默认Webfont是Roboto。但这不是必需的。你可以使用任何你喜欢的字体。

oboto带有5种不同的字体粗细,您可以使用:100,300,400,500,700。

这里是默认嵌入Roboto字体的配置,如果您寻求删除Roboto字体的话:

// 文件: /quasar.config.js
extras: [
  'roboto-font'
]

添加自定义字体

也可以包括其他字体以在应用程序中使用它们。 以下是一种实现方法:

  1. 在您选择的目录中复制新的Webfont[customfont].woff(或其扩展名;建议使用woff以在所有浏览器之间兼容),例如:./src/css/fonts/[customfont.woff]
  2. ./src/css/app.{css|sass|scss|styl}中声明字体(或在您认为合适的任何位置,但正确更新webfont文件的相对路径):
@font-face {
  font-family: customfont;
  src: url(./fonts/customfont.woff);
}

// 声明一个应用它的类
.my-font {
  font-family: 'customfont';
}
  1. 然后在需要的地方使用该类。