I've been using Windows for a while now. Everything goes well except it doesn't render country flags emoji. I didn't notice this until I became a Windows user.
In the Typlog admin portal, there is a region visit metric that displays country flags via emoji. It looks terrible on Windows. Here is how would it look like on Windows:
There are several ways to fix this problem:
<img> tag: https://github.com/hampusborgos/country-flagsI prefer the web font way, although this repo contains only a few stars on GitHub. I didn't use the code provided by country-flag-emoji-polyfill, it is the woff2 font I'm using directly in CSS. The font is a subset of "Twemoji Mozilla".
We would load the web font only on Windows because Mac and Linux can display country flags emoji well. In this way, it would reduce the HTTP requests and net bandwidth, though the font is quite small.
A simple JavaScript is required:
if (/windows/i.test(navigator.userAgent)) {
document.body.classList.add('win')
}This code will add a win class to the <body> tag. We would only use the web font for .win in CSS:
@font-face {
font-family: 'Twemoji Country Flags';
unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
src: url('https://cdn.jsdelivr.net/npm/[email protected]/dist/TwemojiCountryFlags.woff2') format('woff2');
}
body {
font-family: var(--user-defined-font), sans-serif;
}
.win {
font-family: "Twemoji Country Flags", var(--user-defined-font), sans-serif;
}Here is what the region visit metric looks like on Windows now.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。