jekyll/minima

emoji characters lose their color in edge/chrome on windows system

jeffatoptics opened this issue · 2 comments

jeffatoptics commented

Problem Description:

I have a page with emoji characters, such as 🐬

  • they lose their color in edge/chrome browsers in windows system as below. they just follow the font color style defined for the page fonts.

emoji lose color

  • but they still look good in firefox in any system, and also ok in browsers of android system.

emoji with color

Solution:

this is easy and minor change. In style.css definition, the font family shall present "Segoe UI Emoji" before "Segoe UI Symbol". I changed the sequence in initialize.scss , and this fix the above problem.

more detais:

initialize.scss has the following definition

$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Symbol", "Segoe UI Emoji", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif !default;

change it to

$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif !default;
ashmaroli commented

@jeffatoptics You are free to submit a pull request to fix the issue for all users of this theme.
Thanks.

jeffatoptics commented

@ashmaroli thank you. i just submit a PR.