Quasar 排版 (Typography)

了解演示中如何显示标题、块引用、定义列表等。 在这个页面的最后，你可以阅读关于CSS助手类。

标题

<h1>Light 112sp</h1>
<!-- 或: --><div class="q-display-4">Light 112sp</div>

<h2>Regular 56sp</h2>
<!-- 或: --><div class="q-display-3">Regular 56sp</div>

<h3>Regular 45sp</h3>
<!-- 或: --><div class="q-display-2">Regular 45sp</div>

<h4>Regular 34sp</h4>
<!-- 或: --><div class="q-display-1">Regular 34sp</div>

<h5>Regular 24sp</h5>
<!-- 或: --><div class="q-headline">Regular 24sp</div>

<h6>Medium 20sp</h6>
<!-- 或: --><div class="q-title">Medium 20sp</div>

<div class="q-subheading">Regular 16sp</div>

<div class="q-body-2">Medium 14sp</div>

<div class="q-body-1">Regular 14sp</div>

<div class="q-caption">Regular 12sp</div>

粗细

类名
text-weight-thin
text-weight-light
text-weight-regular
text-weight-medium
text-weight-bold
text-weight-bolder

文本类型

您可以用各种方式显示文本。

<!-- 小和大的文字 -->
<small>Text</small>
<big>Text</big>

<!-- sub和sup -->
<sub>Subtext</sub>
<sup>Supertext</sup>

<!-- 粗体（Bold）或斜体（italic） -->
<p class="text-bold">Bold text</p>
<!-- 或: --><strong>Bold text</strong>
<p class="text-italic">Italic text</p>
<!-- 或: --><em>Italic text</em>

<!-- 引用（Quotes） -->
<div class="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</div>

<div class="quote text-right">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</div>

<!-- 引用块（Blockquotes） -->
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous for <cite title="Quasar Framework">Quasar Framework</cite></small>
</blockquote>

<blockquote class="text-right">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous for <cite title="Quasar Framework">Quasar Framework</cite></small>
</blockquote>

<!-- 定义列表(Definition Lists) -->
<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
</dl>

<dl class="horizontal">
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
</dl>

CSS助手类

类名 说明
text-right 将文本对齐到右侧
text-left 将文字对齐到左侧
text-center 将文本对齐到中心
text-justify 文字将是合理的
text-truncate 当容器太小时，应用所有CSS调整来截断文本
text-bold 文本将以粗体显示
text-italic 文本将以斜体显示
text-no-wrap 非包装文本（适用于white-space：nowrap）
uppercase 将文本转换为大写
lowercase 将文本转换为小写
capitalize 使文本的第一个字母大写
round-borders 每个Quasar主题都有一个通用的边界半径。该半径应用于DOM节点
block display属性设置为block
no-margin margin设置为0
no-padding padding设置为0
no-outline outline设置为0

默认的MD字体

在使用Material设计主题构建的Quasar应用中嵌入的默认字体是Roboto。但这不是必需的。你可以使用任何你喜欢的字体。

Roboto带有5种不同的字体粗细，您可以使用：100,300,400,500,700。以下是来自Google的Roboto样本文档的图像，显​​示不同的字体粗细：


Roboto Font

这是Roboto字体默认嵌入的地方，如果您想删除它：

// 文件: /quasar.conf.js
extras: [
  ctx.theme.mat ? 'roboto-font' : null
]

请注意，只有在使用Material主题进行开发/构建时才会包含该字体。

图标 地址栏颜色