Ruble symbol with CSS
Good time of day.
After the introduction of the law on the ruble sign in the international foreign exchange market, many of the customers expressed a desire to put the ruble sign in their stores, and not the “rub.”
Searching the Internet, I have not yet found the special character html (although I found even the special character hryvnia in Ukraine). But Google offered me a couple of options:
1) Connecting Google Fonts. The option is not bad, but to connect to the site of the font only in order to put a ruble sign is nonsense. If you even connect a font, then you need to use it in full. And so just an extra load.
')
2) Put the picture. This is not an option at all. Going with weak traffic every picture counts.
Well, the third option is to do everything through CSS. Not to say that this is a good way, but as an option. Moreover, you can make a mark under the site font.
Those. the method is solved by simple height adjustment. Make an underline and move it higher to the level we need.
You decide what to do. I hope that in the next updates our long-awaited special character will be released and we will not be distorted anymore.
After the introduction of the law on the ruble sign in the international foreign exchange market, many of the customers expressed a desire to put the ruble sign in their stores, and not the “rub.”
Searching the Internet, I have not yet found the special character html (although I found even the special character hryvnia in Ukraine). But Google offered me a couple of options:
1) Connecting Google Fonts. The option is not bad, but to connect to the site of the font only in order to put a ruble sign is nonsense. If you even connect a font, then you need to use it in full. And so just an extra load.
')
2) Put the picture. This is not an option at all. Going with weak traffic every picture counts.
Well, the third option is to do everything through CSS. Not to say that this is a good way, but as an option. Moreover, you can make a mark under the site font.
.rub{ display: inline-block; font-size: 24px; line-height: 7px; border-bottom: 1px solid #000000; width:0.4em; }
.rub{ display: inline-block; font-size: 24px; line-height: 7px; border-bottom: 1px solid #000000; width:0.4em; }
P
Those. the method is solved by simple height adjustment. Make an underline and move it higher to the level we need.
You decide what to do. I hope that in the next updates our long-awaited special character will be released and we will not be distorted anymore.
Source: https://habr.com/ru/post/207572/
All Articles