Skip to content
This repository has been archived by the owner on Nov 3, 2023. It is now read-only.

有没有办法emoji显示国旗 #50

Closed
Littleweisheit opened this issue Mar 30, 2022 · 11 comments
Closed

有没有办法emoji显示国旗 #50

Littleweisheit opened this issue Mar 30, 2022 · 11 comments
Labels
enhancement New feature or request

Comments

@Littleweisheit
Copy link

win11上emoji显示的是字母,linux版本就显示国旗

@zzzgydi
Copy link
Owner

zzzgydi commented Mar 31, 2022

换可以显示国旗emoji字体就可以了,新版加上可以增加自定义字体的设置

@zzzgydi zzzgydi added the enhancement New feature or request label Mar 31, 2022
@Littleweisheit
Copy link
Author

我还以为是chromium的问题,因为chromium都是显示字母,而firefox能显示国旗

@zzzgydi
Copy link
Owner

zzzgydi commented Apr 1, 2022

而firefox能显示国旗

好像是firefox自己带了字体

@zzzgydi
Copy link
Owner

zzzgydi commented Apr 1, 2022

昨晚实现了更换字体和注入css的功能(还有换主题色)。通过设置字体注入css片段,比如@font-face的声明,就可以实现在windows里显示emoji国旗。

本地安装字体之后,填css片段,再在font-family里填上Flags即可。上面的unicode-range最好设置一下,不然可能有点小问题,这还是和引用的字体有关。下面贴一下css片段,参考链接:https://www.bilibili.com/read/cv13600525

@font-face {
  font-family: Flags;
  src: local("Twemoji Mozilla");
  unicode-range: U+1F1E6-1F1FF, U+1F3F3-1F3F4, U+E0001-E007F;
}

src里可以用local()也可以用url(),不过可能要注意CSP限制的问题,我测试了file://协议不行,https://还是可以的。

@Littleweisheit
Copy link
Author

Littleweisheit commented Apr 6, 2022

我把Twemoji Mozilla 填入主题设置-〉family font里面国旗显示了,但是显示有问题,数字不显示。

@zzzgydi
Copy link
Owner

zzzgydi commented Apr 6, 2022

https://github.com/mozilla/twemoji-colr/releases 可以在这里下载和安装字体,一定要本地安装,不然src就要填url

然后在 主题设置 -> CSS Injection里填入

@font-face {
  font-family: Flags;
  src: local("Twemoji Mozilla");
  unicode-range: U+1F1E6-1F1FF, U+1F3F3-1F3F4, U+E0001-E007F;
}

然后在 主题设置 -> Font Family 里填入 Flags

@zzzgydi
Copy link
Owner

zzzgydi commented Apr 6, 2022

实测了一下,还是有好多问题,上面的方法有可能可行,但非常折腾。

  • 字体不支持local,字体的问题
  • 应用不支持url获取字体,CSP的限制
  • 字体转base64,emoji颜色丢失了,不知道啥问题

@9uanhuo
Copy link

9uanhuo commented Apr 7, 2022

Font Family 中可以填写多个字体做 fallback,例如 思源黑体, Twemoji Mozilla,Win10 除日志界面外,其他 Emoji 修改成功,Win11 未测试。

@zzzgydi
Copy link
Owner

zzzgydi commented Apr 7, 2022

这样也可以,就不用捣鼓css注入了。默认的字体是"Roboto", "Helvetica", "Arial", sans-serif,所以可以填上"Roboto", "Helvetica", "Arial", sans-serif, "Twemoji Mozilla"

@zzzgydi zzzgydi closed this as completed Apr 8, 2022
@ddd-zero
Copy link

省流:
1.下载 https://github.com/mozilla/twemoji-colr/releases 字体,解压为所有用户安装
2.在“设置”-“主题”-往下拉-“Font Family”填上"Roboto", "Helvetica", "Arial", sans-serif, "Twemoji Mozilla" 然后保存,重启软件

@malagebidi
Copy link

这样也可以,就不用捣鼓css注入了。默认的字体是"Roboto", "Helvetica", "Arial", sans-serif,所以可以填上"Roboto", "Helvetica", "Arial", sans-serif, "Twemoji Mozilla"

建议把这个字体内置了,默认显示emoji

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

5 participants