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

【问题标题】：CSS first-letter formatting reducing gap between first and second characterCSS首字母格式减少第一个和第二个字符之间的差距
【发布时间】：2023-03-28 03:09:01
【问题描述】：

我正在使用以下 CSS：

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

我想缩小第一个字符和第二个字符之间的差距。例如，在这个website 中，我想减少第一个单词“Thakur”中“T”和“h”之间的空格。

【问题讨论】：

标签： html css character paragraph letter

【解决方案1】：

你可以给负右边距：

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

&lt;p&gt;Thakur&lt;/p&gt;

您可以按百分比或像素来指定边距。您也可以使用@parag-parmmar 推荐的letter-spacing 属性，但最好在% 中给出值，因为您的字体大小是相对的。请参阅 this 帖子以了解有关字母间距的更多信息。您以百分比形式给出了font-size。但是，我建议您查看 rem 单位的字体大小。看看this 精彩的帖子。

【讨论】：

【解决方案2】：

在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>

【讨论】：

【解决方案3】：

对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;
}

&lt;p&gt;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...&lt;/p&gt;

【讨论】：

【解决方案4】：

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

【讨论】：

我会使用这种方法。

【解决方案5】：

试试这个margin: -5px;

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

}

【讨论】：