如何创建由 2 种不同字体组成的按钮？(就我而言，蒙特塞拉特和介绍脚本)

Question

我正在尝试设计一个由两种不同字体(和一个图标(组成的按钮。我试过W3学校，但他们没有涵盖那个具体的例子。

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

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

按钮设计实物模型

Answer 1

您可以在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>

`

Answer 2

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

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