CSS 秘密の花園: シャム文字_html/css_WEB-ITnose

『CSS Secrets』は、@Lea Verou による最新の本で、CSS に関する小さな秘密を説明しています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@全域と @彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。

人間と同じように、すべてのグリフを組み合わせても自然に見えるわけではありません。たとえば、ほとんどのセリフ フォントの f と i です。 i の上の点は f の水平線と重なることが多く、その組み合わせがぎこちなく見えます。

この問題を解決するために、書体設計者は多くの場合、ハイフンと呼ばれる余分な文字をフォントに追加します。これらは、個別に設計されたグリフの 2 つ組または 3 つ組で、対応する文字が互いに隣接する場合に活版印刷スキームで使用されます。たとえば、上の図にある一般的な結合文字のいくつかは、対応する文字を以前に一緒に配置したときよりもはるかに良く見えます。

いわゆる任意の合字もいくつかあります:

実際、私たちは皆、e と t (ラテン語で「and」を意味する「et」) の合字としての謙虚なアンパサンドを知っており、愛用しています。

これは代替スタイルとして設計されたものであり、同等の文字ペアが隣接する場合の問題のためではありません。

ただし、ブラウザはデフォルトで自由合字を使用することはなく (これは正しいですが)、一般的な合字を使用しない傾向があります (これはバグです)。実際、最近まで、合字を明示的に使用する唯一の方法は、対応する Unicode を使用することでした (例: fi 合字の場合)。このアプローチは解決するよりも多くの問題を引き起こします:

• 明らかに、これらのタグは読みにくくなり、書きにくくなります (定義が何を意味するのかを知ることができるのはまったくの幸運です)。
• 現在のフォントにこの合字が含まれていない場合、結果は混乱します (下の画像に示すように)。
• すべての合字に同等の標準 Unicode 文字があるわけではありません。たとえば、ct 合字はどの Unicode 文字にも対応しないため、これを含むすべてのフォントはそれを Unicode PUA (Private Use Area) ブロックに配置する必要があります。
• コピー/ペースト、検索、音声変換などのテキスト アクセシビリティが損なわれます。多くのアプリケーションはこれを非常にインテリジェントに処理できますが、すべてができるわけではありません。一部のブラウザ検索が中断される場合もあります。

だから、このような時には、もっと良い方法が常にありますよね?

解決策

CSS3 では、font-variant を多くの新しい手書きプロパティを含む省略表記に変換できます。そのうちの 1 つは font-variant-ligatures で、特に合字のオンとオフを切り替えるために設計されています。可能な合字をすべて開くには、3 つの識別子を使用する必要があります:

font-variant-ligatures: common-ligatures                        discretionary-ligatures                        historical-ligatures;

このプロパティは継承可能です。 「任意の合字」が読みやすさの妨げになるため、オフにしたいと思うかもしれません。この場合、よく使用される合字のみをオンにすることができます:

font-variant-ligatures: common-ligatures;

他の 2 つの合字を明示的にオフにすることもできます:

font-variant-ligatures: common-ligatures                        no-discretionary-ligatures                        no-historical-ligatures;

font-variant-ligatures は none の値も受け入れ、合字をオフにします完全に閉鎖。設定内容がわからない場合は、none 値を使用しないでください。 font-variant-ligatures を初期値にリセットするには、 none ではなく、normal を使用する必要があります。