我试图使此示例中的文本正确显示，但是我不断剪切各种字母的文本和阴影，但我不知道为什么以及如何修复它。
这是一个jsfiddle(已删除)，因此您可以完全理解它。加载后，请刷新jsfiddle，因为首字母剪裁不会像在常规已发布页面上那样出现。
问题是在加载时(刷新后)，'F'及其阴影将被剪切。然后，将鼠标悬停在文本上-将显示“第二个”，然后将鼠标移出并再次出现第一个单词，但随后会剪裁“t”阴影。
无法弄清楚如何解决这些问题。有人可以帮我清除这些剪辑错误。
谢谢，比尔
更新:我弄清楚了'F'字母剪裁的问题(已更新jsfiddle)-我将需要带有't'剪裁的帮助-谢谢，比尔
BUMP-有人吗？漂亮请-比尔
最佳答案
此问题与呈现字体的方式有关。某些字体(例如您要嵌入的字体)的衬线超出了字母本身的“框”。在典型的版式中，这是通过允许渲染区域扩展到框本身之外来解决的-因为大多数应用程序不会在每个字母周围创建框。
我认为您遇到的问题是因为每个字母实际上都是<span>，这意味着它实际上有一个方框。然后，您的JS将opacity，overflow和定位弄乱了，这会导致CSS渲染在渲染每个<span>时将其单独包装。
我的建议是避免使用要应用到跨度的显式宽度/溢出，而是让它们自动调整大小并控制绝对位置。
如果每个跨度都具有相同的z索引，并且它们之间的间距正确，这应该可以为您提供所需的内容，而不会造成剪切。
更新:
问题在于，字体以重叠字母的方式呈现(就像许多脚本样式的字体一样)。结果，您必须以某种方式渲染该字体，使其超出其框的边界。
但是，当插件中的CSS将各个字母转换为部分透明时，透明项就不能超出其框的外部范围...因此发生了剪切。
解决方案是充分增加盒子的大小，以免发生剪切，并使盒子重叠。
换句话说，诀窍是提供padding-right和padding-left，它们给字体字母足够的空间来充分表达，然后用负的margin-left进行调整以将字母移回一起。
对于这种字体，以这种大小，使之起作用的样式为:
.lslide_wrap a span span.sl-w1 {
...
/* Add the following 2 lines: */
padding: 0 100px 0 22px;
margin-left: -22px;
}
可以在here中找到原始jsFiddle的更新版本。