📜 ⬆️ ⬇️

Are CSS sprites suitable for fonts?

There was a thought: is it possible to use CSS sprites to render headers with unusual fonts?

It seems that this is not so difficult.
  1. You need to prepare a CSS sprite - display all the letters in the picture and create a CSS in which for each letter there is a class that positions the background to the right place in the picture.
  2. Mark the string to be converted with a special class.
  3. At the moment of loading we select all marked lines and for each of their letters we create a span with a class corresponding to the letter from the sprite.
  4. The original text is hidden. Perhaps transparency.

Finally, you can make a server code that would make a sprite from an automatic font (TrueType, for example).

With this method, there will definitely be a problem with kerning. So it will not work well for all fonts. But, probably, kern pairs could be set by margins.
')
Has anyone seen this solution?

Update:
Thanks to habrauzer nuxdie found a ready implementation of this idea: fontjazz.com . Does not allow only the text from the title to copy.

Update 2:
Habrayuzer Magarich offers its implementation - 5socks.net . Here you can copy. It is a pity that due to the transparency of the text, the selection is also not at all visible.

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


All Articles