（请记住，我们必须妥协大小

suraiyaislamsum

和放置才能在浏览器中获得最佳结果）。 字母间距和首字母、字母间距和图像替换首字下沉 图 15：对每个首字下沉应用相同间距的两种方法。[1] 如果在网站上使用不同的字母作为首字下沉，则使用first-child:first-letter 会产生不一致的视觉空间。[2] 在首字下沉后面使用图像可为首字下沉创建一致的视觉空间。 不幸的是，我们无法调整字母间距；不可能创建 26 个唯一版本的first-child:first-letter 并仅使用 HTML 和 CSS 设置它们的样式。（如果有人找到了解决方案，请在评论中与我们分享。）因此，使用First-Child:First-Letter方法的网站将充满笨拙的首字下沉。 字母间距以及“图像替换”和“图像上的字母”方法 无论使用什么字母，“图像替换”方法和“图像上的字母。

”方法（图 15:2）都具有适当的间距。这些方法设置一致的宽度来容纳图像；字母间距的变化发生在图像边框内，而不是在首字下沉和文本之间。 但是，如果您想使用图像替换方法插入宽度不一致的首字下沉图像，该怎么办？ 图 16 显示了使用图像替换方法设置为首字下沉 购买电话号码列表 的各种字母；如果没有背景，首字下沉将不再具有一致的宽度。在左侧面板中（图 16:1），字母 M 看起来很棒，但字母 O 和 I 在首字下沉和文本之间有尴尬的空格。这种间距变化并不是由于字体中的字母间距造成的；而是由于字体中的字母间距所致。出现这种情况是因为字母本身的宽度不同。在右侧面板中（图 16:2），字母与其文本的间距更加舒适。每个字母都有一个独特的类别，并具有适。



当的宽度。宽度范围从 41 像素到 85 像素。 字母宽度和图像替换首字下沉 图 16：字母宽度也会影响字母周围的视觉空间量。[1] M 周围有适当的空间。O 和 I 较窄，因此提供的空间太宽。[2] 每个字母使用独特的类别，宽度也已调整。 “图像替换，无背景”示例的复制 请注意，我为每个跨度使用了两个类。这允许我使用一个类 (drop_o) 来设置空间样式，并使用另一个类 (o) 来指定字母的图像。 “图像替换，无背景”示例的 复制 请注意，我将空间的高度设置为与用于表示首字下沉的图像相同的尺寸。宽度比图像宽；宽度提供首字下沉和文本之间的空白边距。 查看原始图像替换、无背景示例HTML 文档。 最好的方法：融合传统和技术  平衡一致性、可访问性和字母间距问题，我建议使用方法 1：图像替换。