-1

所以,在过去的几个小时里,我正在开发的网站出现了一个问题。在小型大写字母变体中有字符 İ 或 I 的地方,从谷歌字体加载 Roboto 时,Chrome 和 Safari 中的间距突然变得一团糟。我查看了所有代码并将许多更改还原为无济于事,在 Firefox 中很好。再一次,几个小时前还好,我真的不知道发生了什么,你可以在最后一个菜单项中看到它,或者在网站第三块(深灰色)的第一个标题中看到它,上面写着 tebli̇ğ çağris (它粘贴了这个奇怪的字符而不是 i)。我知道我在那里有一个字符串替换脚本,它可能看起来很可疑,但它也会发生在它被删除的情况下.. http://goo.gl/pk38u

我已经调试了更多,似乎正在发生的事情是浏览器以小写的 İ 将其变成带有两个点的乱码 i,在大多数浏览器中一个行为不端,但我不明白它现在是如何出现的而不是之前,以及是什么变化导致了这种情况。

截屏

4

1 回答 1

1

在 Chrome 28 beta 上,页面确实看起来很奇怪,问题可以简化为以下简单情况:

<!doctype html>
<meta charset=utf-8>
<title></title>
<style>
body { text-transform: lowercase; font-variant: small-caps; }
</style>
Takvİm

内容在 Chrome 中显示为“takvim”,而不是(假)小型大写字母中的预期渲染。而如果加上字母间距(说是letter-spacing: 1em为了看清楚效果),可以看出“i”真的是无点的i,“ı”,加上一个单独的点。

这确实很奇怪,并且似乎在数据包含点大写字母 I“İ”时发生。在提到的页面上,脚本转换了一些文本,以便生成这样的字母。出于某种原因,当要求 Chrome 转换为小写字母并使用小型大写字母时,Chrome 无法处理包含该字母的内容——而且它不仅针对该字母失败,而且针对包含它的整个元素。

为避免该问题,请替换text-transform: lowercase; font-variant: small-capstext-transform: uppercase并缩小字体大小,以便获得所需大小的字母。

使用它几乎没有用处font-variant: small-caps,因为浏览器通过使用缩小大小的大写字母而不是适当的小型大写字形来实现它。(这不是应该发生的事情,但这是当前浏览器中实际发生的事情。)因此,您也可以使用大写字母并自己减小字体大小,从而更好地控制 - 并避免这个奇怪的错误。

于 2013-05-24T05:09:51.450 回答