使用 Google Web 字体引导答案

【问题标题】：Bootstrap With Google Web Fonts使用 Google Web 字体引导
【发布时间】：2017-02-02 08:24:17
【问题描述】：

我希望下面body 示例中的 h1 文本使用两种不同的 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>

我在标题中创建了以下内联代码：

<!-- 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”？

【问题讨论】：

注意：我提到了 Bootstrap 的使用，因为可能有一种更简单的方法来执行上述操作并解释类中可能会发生冲突的其他代码。我接受，否则这是一个简单的 html / css 问题。
您的 CSS 有错误。您的班级名称后不应有冒号 .logo-1:{}：.logo-1 { font-family: 'Play', sans-serif; } 和 .logo-2 { font-family: 'Sacramento', cursive; }。

标签： html css twitter-bootstrap fonts

【解决方案1】：

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

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

【讨论】：