html - 使用谷歌网络字体 Bootstrap

Question

我希望下面示例中的 h1 文本在 body 中使用两种不同的 Google Web 字体:

<div class="container text-center">
    <h1 class="display-1 mt-5">This Is My Title</h1>
    <p class="lead mb-5">Coming Soon!</p>
</div>

我在 header 中创建了以下内联代码:

<!-- Google Web Fonts -->
<link href="https://fonts.googleapis.com/css?family=Play|Sacramento" rel="stylesheet">

<!-- Inline Style -->
<style>
    .logo-1:{
    font-family: 'Play', sans-serif;
        }
    .logo-2:{
    font-family: 'Sacramento', cursive;
    }
</style>

我将如何在 Play 字体中制作“This Is”和在 Sacramento 字体中制作“My Title”？

Answer 1

使用 span 元素，它允许您在不影响布局和定位的情况下添加样式，因为 span 是一个内联元素。

<h1 class="display-1 mt-5">
  <span class="logo-1">This Is </span>
  <span class="logo-2">My Title</span>
</h1>