我们将在下面的部分中处理 Quasar 提供的字体排版。
¥We’ll handle the typography supplied by Quasar in the sections below.
标题(Headings)
¥Headings
字体粗细(Font Weights)
¥Font Weights
CSS 辅助类(CSS Helper Classes)
¥CSS Helper Classes
| 类名 | 描述 |
|---|---|
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 | 文本首字母大写 |
默认字体(Default Font)
¥Default Font
嵌入的默认 Web 字体为 Roboto。但这不是必需的。你可以使用任何你喜欢的字体。
¥The default webfont embedded is Roboto. But it is not required. You can use whatever font(s) you like.
Roboto 自带 6 种不同的字体粗细供你使用：100, 300, 400, 500, 700, 900.
¥Roboto comes with 6 different font weights you can use: 100, 300, 400, 500, 700, 900.
Roboto 字体默认嵌入在这里，如果你想移除它：
¥This is where Roboto font comes embedded by default, if you are looking to remove it:
extras: [
'roboto-font'
]添加自定义字体(Add custom fonts)
¥Add custom fonts
还可以包含其他字体以在应用中使用它们。以下是执行此操作的一种方法：
¥It is also possible to include other fonts to use them in the app. The following is one way to do it:
将新的 Web 字体
[customfont].woff（或其任何扩展名；建议使用woff以兼容所有浏览器）复制到你选择的目录中，例如：./src/css/fonts/[customfont.woff]¥Copy your new webfont
[customfont].woff(or whatever extension it has; recommended iswofffor compatibility across all browsers) in a directory of your choice, for example:./src/css/fonts/[customfont.woff]在
./src/css/app.{css|sass|scss|styl}中声明你的字体（或在你认为合适的任何位置，但要正确更新 webfont 文件的相对路径）：¥Declare your font in
./src/css/app.{css|sass|scss|styl}(or in any place you see fit, but correctly update the relative path to the webfont file):
@font-face {
font-family: customfont;
src: url(./fonts/customfont.woff);
}
// declare a class which applies it
.my-font {
font-family: 'customfont';
}然后在你需要的地方使用该类。
¥Then use that class where you need it.