CSS 首字母格式减少了第一个和第二个字符之间的差距

Question

我正在使用以下 css :

p::first-letter {
    font-size: 400%;
    line-height: 0;
}

我想缩小第一个和第二个字符之间的差距。例如，在此 website 中，我想减少第一个单词 'Thakur' 中 'T' 和 'h' 之间的 space。

Answer 1

试试这个 margin: -5px;

p.prophet::first-letter {
    margin: -5px;
    font-size: 400%;
    line-height: 0;

}

Answer 2

可以给负右边距：

p:first-letter{
  font-size: 400%;
  line-height: 0;
  margin-right:-2%;
}

<p>Thakur</p>

您可以以百分比或像素的形式给出边距。也可以用letter-spacing property as recommended by @parag-parmmar but it is better to give value in % because your font-size is relative. Refer this post to know more about letter-spacing. You have given font-size in percentage. But, I would recommend you to look at rem units for font sizing. Have a look at this精彩post。

Answer 3

p::first-letter {
    letter-spacing: -8px;
}

Answer 4

margin-right 使用负值：

p::first-letter {
  margin-right: -5px;
}

body, p, div, h1, h2, h3, h4, h5, h6, h7 {
  font-family: Cambria;
  font-size: 20px;
}

body {
  padding: 25px;
}
p {
  margin: 0 0 10px;
}

p::first-letter {
  display: inline-block;
  margin: 0 -6px 0 0;
  font-size: 300%;
  line-height: 0;
}

<p>Thakur Anukulchandra was a highly accomplished spiritual teacher and the ideal of Netaji Subhash Chandra Bose. He was a very outspoken person yet extremly polite. He contributed more than 80 books on various subjects and many people have written biographies on Him, yet less is knows about Him. Ray A Hauserman, a US vetran of World War II became His disciple and later went on writing few books on Him. Eminent Indians like Deshbandhu Chittaranjan Das, Mahatma Gandhi, Lal Bahadur Shashtri, Shyama Prasad Mukherjee came to meet Thakur to acquire His blessings. People from different parts of the world and different walks of life like scientists, scholars, doctors, lawers, educationalists came to seek wisdom. Continue...</p>

Answer 5

在 p::first-letter 上使用负边距。该值将取决于您的具体情况。

p {
  font-family: "Times"
}
p::first-letter {
  font-size: 400%;
  line-height: .25em;
}
p.dropcap::first-letter {
  margin-right: -.125em;
  color:red;
}

<p class="dropcap">Torem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius sapiente distinctio et, inventore voluptatum necessitatibus perspiciatis, dignissimos cumque, doloribus beatae aliquid deleniti at dolorum. Sunt soluta quae totam eligendi cumque consectetur
  ipsam, iste mollitia.</p>

<p>Torem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius sapiente distinctio et, inventore voluptatum necessitatibus perspiciatis, dignissimos cumque, doloribus beatae aliquid deleniti at dolorum. Sunt soluta quae totam eligendi cumque consectetur
  ipsam, iste mollitia.</p>

CSS 首字母格式减少了第一个和第二个字符之间的差距

CSS first-letter formatting reducing gap between first and second character

html

css

character

paragraph

letter