Unicode表情符号字符基于浏览器使用不同的图像/字体 [英] Unicode emoji characters use different image/font based on browser
问题描述
我目前正在一个项目中嵌入一个使用Unicode表情符号字符的对象。问题是，这些Unicode表情符号字符的显示方式会有所不同，具体取决于我使用的浏览器。例如，谷歌浏览器和Mozilla Firefox仅显示Unicode表情符号字符的Windows版本。另一方面，Internet Explorer 11显示所需的版本（自定义字体）。
图片问题：
这是它的外观以及它在Internet Explorer 11上的外观（带有自定义字体）：
这是当前在Google Chrome和Mozilla上的外观Firefox（具有标准的Windows视觉效果）：
我正在使用的Unicode表情符号字符可以在以下位置找到：
Windows 7 Ultimate + Internet Explorer：
Windows 7 Ultimate + Mozilla Firefox：
Windows 10企业+ Google Chrome：
Windows 10 Enterprise Internet Explorer 11：
Windows 10 Enterprise Mozilla Firefox：
带有Unicode表情符号的网页的Windows 10企业版比较：
任何人都知道关于如何使它们看起来都像Windows 10 Enterprise Internet Explorer 11示例一样？
解决方案是强制将此CSS设置为嵌入元素的顶部：
字体家族： Segoe UI符号；
这是我正在寻找的黑白字体，我错误地认为是本机unicode字体。
解决之道：
- 在获得一些帮助和大量搜索之后，我发现没有本地unicode字体，因此我只需要找到正确的字体。
- 经过长时间搜索，我发现了这一点：$ b $ b > https://developer.microsoft.com/en-us/microsoft-edge/platform/issues / 11635143 /
- 该链接包含以下链接： https ：//codepen.io/prometheusTX/pen/vmZzxG ：
span {
font-size：36px;
字体家族： Segoe UI Emoji；
}
h1 {
font-size：36px;
字体家族： Segoe UI Symbol；
}
- 如您所见，这是我找到所需解决方案/字体的地方。
最后
感谢大家在这里和其他地方的帮助。
I am currently working on a project that embeds an object that uses unicode emoji characters. The problem is, these unicode emoji characters are displaying differently depending on which browser I use. Google Chrome and Mozilla Firefox for example just display the windows version of the unicode emoji characters. Internet Explorer 11 on the other hand displays the desired version (a custom font).
Problem in pictures:
This is how it should look and how it looks on Internet Explorer 11 (with custom font):
This is how it currently looks on Google Chrome and Mozilla Firefox (with standard windows visuals):
The unicode emoji character I am using can be found here: link. The one I am using is called: "hot beverage" on space 694. As you can see, there is one visual style we recognize, the Windows one used by Chrome and Firefox.
So, now I know that Chrome and Firefox both use the windows font for the visualisation of the unicode emoji characters. Based on this info I tried fixing this problem by editing my css (@fontface to be exact) and importing a custom font. This didn't work at all. After this I found out that Internet Explorer does display it correctly without having to import a custom font. This led me to believe that the solution lies in the difference between these browsers. The problem is, I don't know what causes this difference. So that's why I am here:
Does anyone know what causes this difference in displaying the unicode emoji characters? I already tried solving it myself, because I suspected maybe they wouldn't all support the same fonts, but if I look here: https://www.w3schools.com/css/css3_fonts.asp it seems like that couldn't be the problem.
Any help is greatly appreciated.
EDIT: After a lot of trying I have made a new discovery. On a Windows 7 Ultimate it shows the correct display (the non-windows one) on both Internet Explorer 11 and Google Chrome;
On a Windows 10 Enterprise it shows the correct display (the non-windows one) on only Internet Explorer 11. On Google Chrome it shows the windows font.
So now the question is, what is the difference between these Windows version that causes this?
EDIT: It gets even weirder. Windows 7 Ultimate + GoogleChrome:
Windows 7 Ultimate + Internet Explorer:
Windows 7 Ultimate + Mozilla Firefox:
Windows 7 Ultimate comparison of webpage with unicode emoji:
Windows 10 Enterprise + Google Chrome:
Windows 10 Enterprise Internet Explorer 11:
Windows 10 Enterprise Mozilla Firefox:
Windows 10 Enterprise comparison of webpage with unicode emoji:
Anyone have any idea on how to make them all look like the Windows 10 Enterprise Internet Explorer 11 example?
The solution is to force this css on top of the embedded element:
font-family: "Segoe UI Symbol";
This is the black-white font I was looking for and what I wrongly assumed was the native unicode font.
Road to solution:
- After some help and a lot of searching I discovered there was no native unicode font and thus I only needed to find the correct font.
- After a long search I came across this: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11635143/
- This included this link: https://codepen.io/prometheusTX/pen/vmZzxG:
span { font-size:36px; font-family: "Segoe UI Emoji"; } h1 { font-size:36px; font-family: "Segoe UI Symbol"; }
- As you can see, here is where I found the solution / font I was looking for.
In the end it was pretty simple, but the journey towards it was pretty difficult.
Thanks everyone for the help here and elsewhere.
这篇关于Unicode表情符号字符基于浏览器使用不同的图像/字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
