Is there a way to stop FireFox and Chrome from italicising emojis via CSS?

Question

It seems that most browsers on macOS (I suspect other systems too) choose to italicize emojis, which is not what I want. Is there a way to prevent that via CSS, a flag, or an attribute tag?

I figure this can be done with JavaScript, but I'd like to avoid parsing strings and wrapping emojis in HTML tags.

macOS FireFox and Chrome:

macOS Safari:

Edit: This is an example of how the above text is implemented 👇

<em>6 min read by <a href="..."><strong>Dmitri ☕️</strong></a></em>

Answer 1

CSS font-synthesis property

In some browsers you might fix this issue via

font-synthesis: none;

In my tests it solved the problem at least in Firefox for windows.

JS workaround: wrap all emojis in <span>elements with custom classes.

/**
 * wrap all emojiis
 * based on Andreas Zwettler's answer
 * "replace emoji unicode symbol using regexp in javascript"
 * https://stackoverflow.com/questions/22006218/replace-emoji-unicode-symbol-using-regexp-in-javascript#40763403
 */

function wrapEmojis(el = document.body) {
  el.innerHTML = el.innerHTML.replace(/(\ud83d[\u1F601-\ude4f])/g, `<span class="span-emoji">$1</span>`);
}

body {
  font-size: 3em;
  font-weight: 400;
  /* font-synthesis might do the trick */
  font-synthesis: none!important;
}

.span-emoji {
  font-style: normal;
  display: inline-block;
  outline: 1px solid red;
}

<p><button onclick="wrapEmojis()">Wrap emojis</button></p>
<p><em>Italic text &#x1F600;😡</em></p>
<p><em>I hate emojis 💩</em></p>

Remove italic inline style from emojis

Manually removing the italic style by selecting the emoji might not be feasible but a good advice for content editors.

<i> is not an icon tag/element

A lot of icon libraries repurposed the deprecated idiomatic element <i> for icons.
The problem: Even modern browsers are still rendering text <i> as italic.

So you should either use <span> tags or ensure you've included a style rule like:

i{
  fonst-style:normal;
}

to prevent these contents from being Italicized.