如何在一句话中更改多种字体样式

Question

<div class="col-md text-left mt-5">
      <h5 class="Review" style=" font-size: 24px; color: #c0bebe;">Reviews</h5>
      <ul class="list-unstyled quick-links">
        <li> <p style="color: #c0bebe; "> Google-20 reviews </p></li>
        <li><p style="color: #c0bebe;">4,9<i class="far fa-star ml-3"style="color: yellow;"></i> <i class="far fa-star"style="color: yellow;"></i> <i class="far fa-star"style="color: yellow;"></i> <i class="far fa-star"style="color: yellow;"></i> <i class="far fa-star"style="color: yellow;"></i></p></li>
        <li><p style="color: #c0bebe;">Facebook - 32 reviews</p></li>
        <li><p style="color: #c0bebe;">5,0 <i class="far fa-star ml-3"style="color: yellow;"></i> <i class="far fa-star"style="color: yellow;"></i> <i class="far fa-star"style="color: yellow;"></i> <i class="far fa-star"style="color: yellow;"></i> <i class="far fa-star"style="color: yellow;"></i></p></li>
        
      </ul>
    </div>
  </div>

我也想将 Google 的字体样式更改为 lato-bold 并将 20 条评论更改为 lato italic，而它们彼此相邻。

Answer 1

将您想要更改的内容包裹在 <span> 标签中，然后相应地分配 class。

您会注意到我大大清理了代码。这样阅读起来就容易多了。

p {
  color: #c0bebe;
}

.googlefont {
  font-family: Lato;
  font-weight: 600;
}

.reviewfont {
  font-family: Lato;
  font-style: italic;
}

i {
  color: yellow;
}

.Review {
  font-size: 24px;
  color: #c0bebe;
}

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">


<div class="col-md text-left mt-5">
  <h5 class="Review">Reviews</h5>
  <ul class="list-unstyled quick-links">
    <li>
      <p> <span class="googlefont">Google</span>-<span class="reviewfont">20 reviews </span></p>
    </li>
    <li>
      <p>4,9<i class="fa fa-star ml-3"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i></p>
    </li>
    <li>
      <p>Facebook - 32 reviews</p>
    </li>
    <li>
      <p>5,0 <i class="fa fa-star ml-3"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i></p>
    </li>

  </ul>
</div>

如何在一句话中更改多种字体样式

How to change multiple font styles in one sentence

html

css

fonts

font-size