I have 3 options:

  1. font-awesome , well, everything is clear here: + the font will be pretty, we’re not steaming - you cannot change the style, if the font has not been loaded, then we don’t see the sign on the idea.

  2. svg , the designer will draw as he wants, and I insert it separately or from the sprite: + we get exactly the right style, - all the minuses of svg, Line-height problems, which will have to be solved with indents, the size and color control, which will have to be overridden by fill

  3. Encoding : + we can use any font, it is easy to change the color, size, - the fonts may not be loaded, on different devices do not appear (hello, iPhones), there are as many as 2 codes that work differently.

In some, I used SVG, but I was uncomfortable. I decided to introduce it with a cat, but on a separate page the fonts are used 50/50, in iPhones it is even worse. Then I decided to use for the ruble a standard reset of fonts under the device from the medium \ VP:

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;

font-weight: bold;

I’m using the & # x20bd option because It works better, goes without a serif. There is another option, use PTRouble font. Cons like FA and worse, because here you need to use different numbers \ letters, in our case, the “9” is often suitable for drawing. If the font does not load, then users will see something like this in the price: 123 56 9

And what is more correct? Options "rub" and "p" does not offer ...

    1 answer 1

    The ruble sign has its own Unicode number. It is necessary to use it. This will allow users to:

    1. copy the character to the clipboard along with the rest of the message,
    2. read it on screen reader.

    Font-awesome does not allow doing this (this is not a bug, but a feature, since usually icons and should not be copied or read).

    For the picture, you can use alt for the same purpose, but this approach is outdated (for some reason, the same symbol was added to Unicode!)

    In order for the symbol to appear on all devices, you can connect a separate font for it. You can even use a font consisting of only one character (if you use Google Fonts, add & text = ₽ to the URL). It does not hurt to copy the text to the clipboard or read it.

    • Ok, and how to be with different display on ayosyakh \ makah and 2 codings judging by wiki? ru.wikipedia.org/wiki/… I use the second one - sinneren
    • @sinneren what are the two encodings? Why are you satisfied with the different display of the letter а - but not satisfied with the different display of the symbol in ₽ ? - Pavel Mayorov
    • I'm not talking about yutf and wine. I'm talking about & # 8381; or & # x20bd; - sinneren
    • one
      @sinneren is the same character, just its code is written in different number systems. - Pavel Mayorov