Vuetify 标题和副标题未左对齐

Question

我有这个 vuetify 代码：

    <div class="mb-6">
      <h1 class="text-h4">
        {{title}}
      </h1>
      <p class="subtitle-1 font-weight-thin" v-if="subtitle">{{subtitle}}</p>
    </div>

这会产生未垂直对齐的 title 和 subtitle，如下所示：

标题 M 之间的 left-space 比副标题更宽。

知道为什么吗？我想这是我第一次遇到这样的问题，因此我认为这是 Vuetify 排版问题。

我试过 letter-spacing CSS 属性但没有成功：它改变了 space 字母之间的 但是不在前面。我也试过 margin-block-start CSS 属性，但它没有改变任何东西。

感谢帮助

Answer 1

这不是 vuetify 或 letter-spacing 的问题。这来自您正在使用的 font。 Vuetify 默认使用 Google 的 Roboto 字体。

There's a playground 在 Google 字体与 Roboto 字体。您可能会注意到您提到的问题也存在于此处。例如，Regular 400 @64px 中有一些 space：

让我们使用不同的字体测试您的代码。例如，我将使用 CSS font-family: serif !important; 回退到 Windows 平台上的 Times New Roman：

看起来不错，没有间距。

因此，解决您的问题的一种方法是更改字体。我相信有比Times更适合网站使用的字体，并且没有这样的问题。

根据Vuetify docs，您可以在src/sass/variables.scss 文件中用一行更改整个项目的字体。请记住，这会导致项目构建 更长的时间:

$body-font-family: 'Work Sans', serif;

可能您不想更改字体。所以你可以这样改变整个字符串的位置：

.text-h4::first-letter {
   margin-left: -0.04em;
}

这种情况下，未选中的行会对齐一点，但选中就会出现问题：

也许 this SO question will also help you. And there's a playground at CodePen 您可以在其中测试一些解决方案。

Vuetify 标题和副标题未左对齐

Vuetify title and subtitle not aligned left

letter-spacing

vuetify.js