html - 使用 CSS 将首字下沉创建为图像(具有辅助功能)

Question

网上有很多指南解释如何在 HTML 和 CSS 中设置首字下沉，例如https://css-tricks.com/snippets/css/drop-caps/ (他们通常需要注意不要破坏屏幕阅读器的可访问性，例如将单词“Carol”拆分为“C arol”。)

但是我找到的所有在线指南都讨论了如何设置 :first-letter 的样式，例如更改其字体、向左浮动等。

我的设计师要求我创建一个图像首字下沉，而不仅仅是不同的大小/字体。

我的第一次尝试是这样的:

<p><img src="c.jpg" alt="C" style="float: left;">arol

但屏幕阅读器将其读作两个词“C arol”，而不是一个词“Carol”。

处理此问题的最佳方法是什么？

Answer 1

您可以利用首字母伪元素可以具有背景图像这一事实，并将首字母本身设置为透明以使其不可见，但屏幕阅读器不应注意到，因为基本 HTML 保持不变.

p.dropcapimg::first-letter {
  background-image: url(/image/WecKn.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-center: center center;
  float: left;
  font-size: 6rem;
  line-height: 0.65;
  color: transparent;
  margin-right: -0.15em;
}

<p class="dropcapimg">Carol a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text
  now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text
  now a lot of text now a lot of text now </p>

显然，您需要根据实际图像调整尺寸。