css - Wordpress 徽标编辑

Question

客户希望徽标是字体而不是图像。标志有 2 种不同颜色和 2 种不同字体的问题。

例如，第一个单词是 !mpact，他们使用 Impact 字体。这 ！是红色的，而 mpact 是白色的。标志的第二个字是arial字体。

我可以使用 css 将 .logo 类编辑为所有 Impact 字体和一种颜色，但我怎样才能实现他们所要求的一切。

这是我当前的代码。

.logo {
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
    color: #FFFFFF;
    font-size: 28px;
}

Answer 1

你可以使用 span 标签来做这样的事情

删除你以前的东西并将其放入：

<!-- [ wrapper ] start -->
    <style type="text/css">    

          #first {
                color:red;
          }

          #second {
                color:white;
          }

          #third {
                font-family:arial;
          }

          .logo {
            font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
            color: #FFFFFF;
            font-size: 28px;
          }

          </style>
<div class="wrapper">
            <span id="first">!</span><span id="second">mpact</span> <span id="third">(second
            word)</span>
</div>
<!-- [ wrapper ] end -->

请务必将“（第二个单词）”替换为您的第二个单词

Answer 2

这是工作答案

<style type="text/css">    
      #first {
            color:red;
      }

      #second {
            color:white;
      }

      #third {
            color:red;
            font-size:14px;
      }

      .logo {
        font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
        color: #FFFFFF;
        font-size: 38px;
      }

      body {
background-color: #071425;
}
</style>

<div class="logo">
   <span id="first">!</span><span id="second">mpact</span><br /><span id="third">Advisory Group LLC</span>
</div>