CODEWITHSUNDEEP
cssfonts
linus Wang
linus Wang

Reputation: 51

How does CSS font-weight work with emojis?

I'm blocked by a question, on some Android device, I type some emoji and save them to database.
Then load them and display in html page, but the emoji is invisible if set a font-weight: bold.
If set font-weight: normal can display.

How does css font-weight work?
How does the browser parse CSS when it sees font-weight:bold or font-weight:normal?

Upvotes: 2

Views: 948

Answers (1)

mrmoment
mrmoment

Reputation: 757

System will call a bold font file (e.g., see Google Fonts which will list different weights of a font family) and if you don't have that font file on your device, it will fail to display the characters (actually for regular characters system tend to load a similar font in this case, but emoji characters are not regular).

You can include webfonts and contain the bold family in <head> section. E.g.,

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

Upvotes: 1

Related Questions