开箱即用版
下载这个基于最新 GitHub commit b3e3051 2025-06-19 01:06 UTC+8 的 NotoColorEmoji 字体(仅提取了国旗 Emoji 的范围 U+1F1E6-1F1FF
,无其他字体)
https://www.alipan.com/s/xhHmWPB4cH2
提取码 vp02
使用方法
<!--加载 NotoEmoji 字体-->
@font-face {
font-family: 'FlagEmoji';
unicode-range: U+1F1E6-1F1FF;
src: url('/path/to/Flags.woff2') format('woff2');
}
<!--设置优先级示例-->
#app {
font-family: 'NotoEmoji', 'DFPshaoNvW5-GB', BlinkMacSystemFont, 'segoe ui', Roboto, 'helvetica neue', Arial, 'noto sans', sans-serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol', 'noto color emoji' !important;
}
效果:仅让国旗 emoji 使用 Noto Emoji 字体,而其他文本继续使用自定义字体
备注:仅在 Windows 10 21/22 H2、Win 11 24 H2 + Chrome v136 + 360 极速浏览器 + Vivaldi 测试通过,更旧版本系统兼容情况未知,建议自测
由于一些众所周知的政治方面考量,Windows 下 浏览器的 Emoji 国旗旗帜的显示一直是个兼容性问题
Windows 系统自带的 Segoe UI Emoji 字体包含了大部分 Emoji,但不包括旗帜 Emoji,这是微软故意为之的,出于政治或地域敏感问题的考量,不会在系统级别显示国旗 emoji,而是只显示对应的两字母代码(例如 🇺🇸 显示为 "US"),这样做有助于避免潜在的争议,特别是在一些国际政治敏感地区,微软因为这个问题吃过很多亏
例如中国台湾省区旗青天白日旗,在国行 iPhone 上可能显示为缺失字符 xx 或者方块占位符
解决方案:
使用 NotoColorEmoji 类字体
Noto Emoji 是一个由 Google 开发的开源字体(遵循 Open Font License 1.1 许可证)的表情符号库,它提供标准的 Unicode 表情符号支持,专门设计用于显示 emoji,覆盖了所有 Unicode 中定义的 emoji 字符,包括国旗 emoji
特性:
- 符合 Unicode 标准的彩色表情符号字体
- 一个完整的 Noto 彩色表情符号字体文件库,包括矢量 SVG 和 PNG 格式
- 用于表情符号输入的元数据(包括短代码、表情符号排序、ASCII 等效符号)
- NotoColorEmoji 项目
https://github.com/googlefonts/noto-emoji
然后使用 https://github.com/fonttools/fonttools 项目提取 Emoji 国旗 的 unicode 字体范围,具体为 U+1F1E6-1F1FF
自备 python3 环境,如 python3.12,安装相关模块
pip install fonttools brotli zopfli
提取字体,自行修改路径和字体名为你的实际路径
pyftsubset %userprofile%\Desktop\NotoColorEmoji.ttf --unicodes=U+1F1E6-1F1FF --output-file=Flags.woff2 --flavor=woff2
鸣谢:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face
https://github.com/fonttools/fonttools
https://github.com/googlefonts/noto-emoji