Question

我在我的网页中使用这些谷歌字体（我也使用Bootstrap - 不知道是否有任何改变，我对这个编码事物有点新鲜）：

.initial {
  font-size: 1.5em;
  font-family: 'Euphoria Script', cursive;
}

p {
  font-family: 'Open Sans', sans-serif;
}

<html><head>
<link href='https://fonts.googleapis.com/css?family=Euphoria+Script&subset=latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans&subset=latin-ext' rel='stylesheet' type='text/css'></head>
  <body>
    <p><span class="initial">S</span>ome text here. And some more. We seriously need a lot of text.</p>
  </body>
  </html>

问题在于，由于幸福感字体较高，当线条断开时，第一行与第二行之间的空间比所有其他行之间的空间更大。有一些解决方法吗？我不在乎文本是在初始附近还是缩进。

谢谢！

Answer 1

指定文本的行高，因此尽管字体大小不同，但所有文本的高度都相同。试试这个：

.initial {
  font-size: 1.5em;
  font-family: 'Euphoria Script', cursive;
}

p {
  line-height: 1.2em;
  font-family: 'Open Sans', sans-serif;
}

<html><head>
<link href='https://fonts.googleapis.com/css?family=Euphoria+Script&subset=latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans&subset=latin-ext' rel='stylesheet' type='text/css'></head>
  <body>
    <p><span class="initial">S</span>ome text here. And some more. We seriously need a lot of text. And some more. We seriously need a lot of text. And some more. We seriously need a lot of text. And some more. We seriously need a lot of text. And some more. We seriously need a lot of text. And some more. We seriously need a lot of text.</p>
  </body>
  </html>

Answer 2

考虑使用float：left（如果您不关心支持旧浏览器，请使用+第一个字母选择器：

p:first-letter {
    font-size: 1.5em;
    float: left;
    padding-right: 5px;
    padding-bottom: 5px;
    color: red;
}

请参阅http://jsfiddle.net/zr8qarw9/

程式化的首字母缩写会导致文本中出现空白

2 个答案: