-1

そのため、ここ数時間で、開発中の私の Web サイトで問題が発生しました。Google フォントから Roboto を読み込んで、スモール キャップ バリアントの İ または I の文字がある場合、Chrome と Safari でスペーシングが突然すべて台無しになります。私はすべてのコードに目を通し、多くの変更を無効に戻しましたが、Firefox では問題ありません。繰り返しますが、数時間前は大丈夫でしたが、何が起こっているのか本当にわかりません。最後のメニュー項目、またはウェブサイトの 3 番目のブロック (濃い灰色) の最初のヘッダーで tebli̇ğ çağris と表示されています。 (i の代わりにこの奇妙な文字を貼り付けます)。疑わしいと思われるスクリプトを置き換える文字列があることは知っていますが、それを削除しても同様に発生します.. http://goo.gl/pk38u

私はもう少しデバッグしましたが、ブラウザが小文字のİで、2つのドットで文字化けしたiになり、1つはほとんどのブラウザで誤動作しているように見えますが、それがどのように発生したのか理解できません。以前、およびどのような変更がこれを引き起こしたのか。

スクリーンショット

4

1 に答える 1

1

Chrome 28 ベータ版では、ページが実際に奇妙に見えますが、問題は次の単純なケースに縮小できます。

<!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 はその文字を含むコンテンツを処理できません。その文字だけではなく、それを含む要素全体で失敗します。

この問題を回避するには、置き換えtext-transform: lowercase; font-variant: small-capsてtext-transform: uppercaseフォント サイズを小さくし、文字が目的のサイズになるようにします。

font-variant: small-capsブラウザは、適切な小文字グリフの代わりに縮小サイズの大文字を使用して実装するため、を使用することはほとんど役に立ちません。(これは起こるべきことではありませんが、現在のブラウザーで実際に起こっていることです。) したがって、大文字を使用してフォント サイズを自分で小さくすることもできます。これにより、制御が向上し、この奇妙なバグを回避できます。

于 2013-05-24T05:09:51.450 に答える