如何在CSS中跨浏览器兼容指定MS Gothic等日文字体？

我在使用CSS为文本指定日文字体时，遇到了Safari浏览器不兼容的问题。目前使用的是普及度很高的日文字体 MS Gothic。
我本地设备已安装该字体，常规日本用户设备也普遍预装该字体。我编写的font-family声明如下：

font-family :  'MS Gothic', 'ＭＳ ゴシック' , 'MS ゴシック' , Msgothic, 'ヒラギノ明朝 ProN', sans-serif;

其中“ＭＳ ゴシック”是MS Gothic的日文名称，“ヒラギノ明朝 ProN”是我设置的兜底fallback字体。上述写法在Chrome浏览器中可以正常渲染出预期的MS Gothic字体：

但在Safari浏览器中会错误降级到第5位的ヒラギノ明朝 ProN：

我已确认本地设备正确安装MS Gothic字体，且Microsoft Word中可通过日文名称“ＭＳ ゴシック”正常选中该字体。请问如何编写font-family声明，才能实现日文字体的跨浏览器兼容指定？
测试代码如下：

#output {
  font-size: 3.5rem;
  font-family :  'MS Gothic', 'ＭＳ ゴシック' , 'MS ゴシック' , Msgothic, 'ヒラギノ明朝 ProN', sans-serif;
}

<div id="output">日本こんにちは</div>

核心原因 #

Safari 对多语言字体名称、全角字符的匹配规则和 Chromium 内核浏览器不同，原有写法存在两个影响匹配的问题：

• 字体名称前后的多余空格会导致 Safari 匹配失败，原写法中 'ＭＳ ゴシック' 两侧存在多余空格
• 苹果平台下 MS Gothic 的别名匹配优先级和 Windows 不同，缺少同风格的哥特体（黑体）中间兜底项，直接落到了明朝（宋体）类的兜底字体

兼容写法 #

基础修正版（风格统一优先） #

font-family: "MS Gothic", "ＭＳ ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;

保留原有明朝兜底版 #

font-family: "MS Gothic", "ＭＳ ゴシック", "MS ゴシック", Msgothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "ヒラギノ明朝 ProN", sans-serif;

更稳妥的统一别名方案 #

如果要彻底规避不同浏览器的匹配逻辑差异，可以用 @font-face 统一绑定所有别名，调用时直接用自定义名称即可：

@font-face {
  font-family: "Custom Japanese Gothic";
  src: local("MS Gothic"), local("ＭＳ ゴシック"), local("Hiragino Kaku Gothic ProN");
}

#output {
  font-size: 3.5rem;
  font-family: "Custom Japanese Gothic", "ヒラギノ明朝 ProN", sans-serif;
}

内容的提问来源于stack exchange，提问作者antun