javascript - 如何为 div 设置固定高度和宽度

Question

我已经查看了很多已经提出的问题，但无法找到并回答适合我的问题。我正在尝试制作一个中间有一个符号的 Logo 。 Ampersand 应该每隔几秒更改一次字体系列。唯一的问题是现在当它更改字体时会弄乱 who 页面。

https://codepen.io/anon/pen/BVddWV

主要问题来自 CSS 中的第 21 行

.ampersand{
  display:inline;
  width:35px;
  max-width:35px;
  height:79px;
  max-height: 79px;
  font-family:"Exo", sans-serif;
}

有什么想法吗？

Answer 1

在 <b> 上添加了显示:flex标记并删除 & 符号样式并使其成为 span而不是 div 并添加了 line-height: 1

.ampersand {
  line-height: 1;
  display: inline-block;
  width: 60px;
  transition: all 1s;
}

<b display: flex;>Flo<span class="ampersand">&</span>Behold</b>

$(document).ready(function() {
  var fonts = ['Dosis', 'Exo', 'Gloria Hallelujah', 'PT Sans', 'PT Serif', 'Yaanone Kaffeesatz'];
  var counter = 0;
  var inst = setInterval(change, 2000);

  function change() {
    if (counter > fonts.length) {
      counter = 0;
    }
    font_selection = fonts[counter];
    $('.ampersand').css("font-family", font_selection);
    counter++;
  }
});

@import url('https://fonts.googleapis.com/css?family=Quicksand');
@import url('https://fonts.googleapis.com/css?family=Molengo');
@import url('https://fonts.googleapis.com/css?family=Dosis|Exo|Gloria+Hallelujah|PT+Sans|PT+Serif|Yanone+Kaffeesatz');
* {
  font-family: "Gill Sans", sans-serif;
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #f5f6fa;
}

#header {
  width: 100%;
  padding: 4% 0px 20px 0px;
}

.logo_text {
  font-family: "Molengo", sans-serif;
  font-size: 70px;
  color: #333;
}

.ampersand {
  line-height: 1;
  display: inline-block;
  width: 60px;
  transition: all 1s;
}

.nav {
  width: 100%;
  padding: 25px 0px 25px 0px;
}

.nav>ul {
  padding-top: 15px;
}

.nav>ul>a {
  text-decoration: none;
  color: #333;
}

.nav>ul>a>li {
  color: #333;
  font-size: 25px;
  padding: 20px 30px 20px 30px;
  display: inline;
  transition: border 0.1s linear;
  border: 3px solid #f5f6fa;
}

.nav>ul>a>li:hover {
  border: 3px solid #333;
}

#body {
  padding-top: 35px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wrapper" align="center">

  <div id="header">
    <div class="logo">
      <span class="logo_text"><b display: flex;>Flo<span class="ampersand">&</span>Behold</b>
      </span>
    </div>
    <div class="nav">
      <ul>
        <a href="#">
          <li>Home</li>
        </a>
        <a href="#">
          <li>About</li>
        </a>
        <a href="#">
          <li>Music</li>
        </a>
        <a href="#">
          <li>Media</li>
        </a>
        <a href="#">
          <li>Contact</li>
        </a>
      </ul>
    </div>
  </div>
  <div id="body"></div>
</div>