如何创建包含 2 种不同字体的按钮？（在我的例子中，Montserrat & Intro Script）

Question

我正在尝试设计一个包含 2 种不同字体（和一个图标）的按钮。我试过 W3 Schools，但他们没有涵盖那个具体的例子。

按钮设计中的字体为 Montserrat 和 Intro Script。

有什么建议或好的资源吗？提前谢谢。

Button Design Mockup

Answer 1

您可以在一个按钮中放置多个具有不同样式的 span。

<button>
  <span style="font-family: 'Lobster';">
    Hello
  </span>
  <span style="font-family: 'Montserrat';">
    World!
  </span>
</button>

Answer 2

您可以将要在 span 中制作不同字体的文本换行，然后更改该 span 的字体。您可能需要调整垂直对齐方式以使它们正确对齐。

在下面的例子中，我使用了vertical-align: sub

button{
  background-color: #004d94;
  border: none;
  border-radius: 10px;
  padding: 10px 60px;
  color: #fff;
  font-family: "Montserrat";
  font-size: 20px;
  line-height: 40px;
}

button i {
  padding-right: 20px;
  font-size: 24px;
}

button > span{
  font-family: "Lobster Two";
  font-size: 48px;
  line-height: 40px;
  vertical-align: sub;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster+Two:ital@1&family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">


<button>
  <i class="fas fa-user-plus"></i>
  Join the <span>crew</span> today
</button>

`

如何创建包含 2 种不同字体的按钮？ （在我的例子中，Montserrat & Intro Script）

How do I create a button that consists of 2 different fonts? (In my case, Montserrat & Intro Script)

css

fonts

button

如何创建包含 2 种不同字体的按钮？（在我的例子中，Montserrat & Intro Script）