Fix CJK fonts again and misc. font issues (#14575)

* Push system-ui further down the stack, fix #12966

* Fix Firefox showing U+300x in emoji font and more

* Revert emoji font and fix long-standing Safari bug

* Exclude Safari emoji fix above 1.25x zoom

* Minor correctness/typo fix, affects only legacy platforms

* Emoji consistency for monospace (e.g. EasyMDE)

* Override paradigm; macOS/iOS-specific metric fix

* Move whitespace fix to font-face

* Handle metric calculation errors with Firefox

* One last workaround for aliased fonts in Linux

1 files changed, 28 insertions, 38 deletions

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 351dbf5da0..121a2b2064 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -1,10 +1,9 @@
 :root {
   /* documented customizable variables */
-  --fonts-proportional: system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "Liberation Sans", sans-serif;
-  --fonts-monospace: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
-  --fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Twemoji Mozilla";
+  --fonts-proportional: -apple-system, "Segoe UI", system-ui, "Roboto", "Helvetica Neue", "Arial";
+  --fonts-monospace: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);
+  --fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
   /* other variables */
-  --fonts-regular: var(--fonts-proportional), var(--fonts-emoji);
   --border-radius: .28571429rem;
   --opacity-disabled: .55;
   --color-primary: #4183c4;
@@ -115,36 +114,8 @@
   --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
 }
 
-:root:lang(ja) {
-  --fonts-proportional: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Source Han Sans JP", "Noto Sans CJK JP", "Droid Sans Japanese", "Meiryo", "MS PGothic";
-}
-
-:root:lang(zh-CN) {
-  --fonts-proportional: "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "Heiti SC", "SimHei";
-}
-
-:root:lang(zh-TW) {
-  --fonts-proportional: "PingFang TC", "Hiragino Sans TC", "Source Han Sans TW", "Source Han Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", "Heiti TC", "PMingLiU";
-}
-
-:root:lang(zh-HK) {
-  --fonts-proportional: "PingFang HK", "Hiragino Sans TC", "Source Han Sans HK", "Source Han Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", "Heiti TC", "PMingLiU_HKSCS", "PMingLiU";
-}
-
-:root:lang(ko) {
-  --fonts-proportional: "Apple SD Gothic Neo", "NanumBarunGothic", "Malgun Gothic", "Gulim", "Dotum", "Nanum Gothic", "Source Han Sans KR", "Noto Sans CJK KR";
-}
-
-@font-face {
-  font-family: "Yu Gothic";
-  src: local("Yu Gothic Medium");
-  font-weight: 400;
-}
-
-@font-face {
-  font-family: "Yu Gothic";
-  src: local("Yu Gothic Bold");
-  font-weight: 500;
+:root * {
+  --fonts-regular: var(--fonts-override, var(--fonts-proportional)), "Noto Sans", "Liberation Sans", var(--fonts-emoji), sans-serif;
 }
 
 textarea {
@@ -1151,10 +1122,18 @@ footer {
     }
   }
 
-  .ui.language .menu {
-    max-height: 500px;
-    overflow-y: auto;
-    margin-bottom: 7px;
+  .ui.language {
+    .menu {
+      max-height: 500px;
+      overflow-y: auto;
+      margin-bottom: 7px;
+    }
+
+    .svg {
+      margin-right: .15em;
+      vertical-align: top;
+      margin-top: calc(2em - 16px);
+    }
   }
 
   .ui {
@@ -1885,6 +1864,17 @@ table th[data-sortt-desc] {
   font-style: normal !important;
   font-weight: normal !important;
   vertical-align: -.075em;
+
+  @supports (-webkit-hyphens:none) {
+    body:not(.safari-above125) & {
+      font-size: inherit;
+      vertical-align: inherit;
+      img {
+        font-size: 1.25em;
+        vertical-align: -.225em !important;
+      }
+    }
+  }
 }
 
 .emoji img,