在测试的 82 种组合中，使用图像作为首字下沉在 79 种组合中表现良好。它改变了 Opera Mini 5.1 (Android 2.2) 和 Mobile Safari 4.0.5 (iPhone 4、iPhone 3GS) 上的位置。 图像替换首字下沉 图 7：有人居住的初始上限，类似于上图 6 所示的 1516 年希腊语新约中使用的上限。[1] 在所测试的 82 种浏览器版本操作系统组合中，使用图像作为首字下沉在 79 种组合中表现出色。[2] 在 Opera Mini 5.1 (Android 2.2) 上略有下降。[3] 它在 Mobile Safari 4.0.5（iPhone 4、iPhone 3GS）上向上移动，导致图像下方出现尴尬的空间。（首字下沉插图：Bruce Maddocks） “图像替换”示例的 HTML <p><span class="drop f">F<span>ine typography does not … <p> 复制 请注意，我在跨度中。
使用了两个类。这允许我使用一个类（drop）来设置空间的样式，并使用另一个类（f）来指定字母的图像。 “图像替换”示例的 复制 请注意，我将空间的宽度和高度设置为与用于表示首字下沉的图像相同的尺寸。text-indent 属性用于将实际字母放置在空间可见区域之外。我们不 购买电话号码列表 想看到 HTML 字母，但包含它很重要，这样未启用 CSS 的浏览器将显示整个单词。 查看原始图像替换示例HTML 文档。 方法 2：在背景图像上写字母 将字母放在背景图像上的效果稍差一些（图 8）。在测试的 82 种组合中，它在 77 种组合中始终有效。它在与上述图像替换方法相同的三个浏览器（Opera Mini 5.1 (Android 2.2) 和 Mobile Safari 4.0.5 (iPhone 4、iPhone 3GS)）以及 Windows Vista IE7 和 Windows XP IE7 上都出现了问题。诚。
然，PC 用户越来越多地使用 Windows 7 和 IE8 或更高版本，因此最后两个浏览器可能不是问题。 使用背景图像的首字下沉 图 8：带有装饰的首字母盖，类似于上图 5 所示的 1480 年印刷拉丁圣经中使用的盖 — 使用背景图像创建。[1] 在测试的 82 种浏览器版本操作系统组合中，有 77 种在背景图像上放置字母都可以完美呈现。[2] Opera Mini 5.1 (Android 2.2) 上的首字下沉失去了样式。[3] 在 Mobile Safari 4.0.5（iPhone 4、iPhone 3GS）上，字母和图像向上移动，导致图像下方出现尴尬的空间。[4] 该字母在 Windows Vista IE7 和 Windows XP IE7 上被截断。 “背景图像上的字母”示例的 HTML <p><span class="cap">A<span>nother way to … <p> 复制 “背景图像上的字母”示例的 复制 请注意，我在此版本中添加。
發表於 2024-1-23 15:23:06
