移动端Chrome中Courier New字体显示异常问题求助

我尝试在HTML中加载从Windows系统C:/Windows/Fonts路径提取的Courier New字体，同时通过转换工具生成了WOFF和WOFF2格式。该字体在笔记本电脑上显示正常，但在手机Chrome浏览器中显示异常。我先后尝试两种加载方式，均未解决问题：

• 使用<script>标签预加载WOFF2格式字体
• 使用CSS的@font-face语法加载TTF或WOFF2格式字体

此前的@font-face尝试 #

以下是我之前用@font-face加载Courier New的代码：

@font-face {
  font-family: 'Courier New';
  font-style: normal;
  font-weight: normal;
  src: url('https://violetscript.github.io/docs/fonts/cour.woff2') format('woff2');
}

使用<script>的代码片段 #

CSS代码 #

html, body {
  font-family: 'Courier New';
  font-size: 64px;
}

HTML代码 #

<script rel="preload" src="https://violetscript.github.io/docs/fonts/cour.woff2" as="font" type="font/woff2" crossorigin></script>

使用CSS @font-face的代码片段 #

@font-face {
  font-family: 'Courier New';
  font-style: normal;
  font-weight: normal;
  src: url('https://violetscript.github.io/docs/fonts/cour.woff2') format('woff2');
}

html, body {
  font-family: 'Courier New';
  font-size: 64px;
}

（HTML部分无额外代码）

字体显示效果对比 #

预期显示效果（Courier New） #

替换为Verdana后的显示效果 #

将@font-face的URL改为verdana.woff2后，页面字体显示如下：

值得注意的是，此时即便CSS中设置body { font-family: 'Courier New' }，页面字体仍会变为Verdana，说明@font-face语法本身是有效的。

将@font-face指向Verdana的代码片段 #

@font-face {
  font-family: 'Courier New';
  font-style: normal;
  font-weight: normal;
  src: url('https://violetscript.github.io/docs/fonts/verdana.woff2') format('woff2');
}

html, body {
  font-family: 'Courier New';
  font-size: 64px;
}

（HTML部分无额外代码）

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