CSSスプライトはフォントに適していますか?

考えがありました:珍しいフォントでヘッダーを表示するためにCSSスプライトを使用することは可能ですか?

これはそれほど難しくないようです。
  1. CSSスプライトを準備する必要があります-画像内のすべての文字を出力し、CSSを作成します。各文字には、画像内の適切な場所に背景を配置するクラスがあります。
  2. 変換する行を特別なクラスでマークします。
  3. ロード時に、マークされたすべての行を選択し、各文字に対して、スプライトからの文字に対応するクラスを持つスパンを作成します。
  4. 元のテキストは非表示です。 おそらく透明性。

最後に、フォント(TrueTypeなど)から自動的にスプライトを空白にするサーバー側コードを作成できます。

この方法では、カーニングに間違いなく問題があります。 そのため、すべてのフォントでうまく機能するとは限りません。 しかし、おそらく、カーニングペアはマージンによって設定できます。

誰かがそのような解決策を見ましたか?

更新:
nuxdie habrayuzerのおかげで、このアイデアの既製の実装が見つかりました: fontjazz.com 。 ヘッダーのテキストのみをコピーすることはできません。

アップデート2:
Habrauser Magarichは、その実装-5socks.netを提供しています。 ここでコピーできます。 テキストが透明であるため、選択範囲もまったく表示されないのは残念です。

Source: https://habr.com/ru/post/J68411/


All Articles