Google Font Space Mono在移动浏览器无法生效问题排查

问题描述 #

我使用Google Web Fonts提供的Space Mono（Bold 700 Italic）字体，该字体在桌面Chrome浏览器中显示正常，但在移动Chrome及Safari浏览器中无法生效，已尝试清除设备缓存但无效，字体回退到默认等宽字体New Courier。

我的HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <title>Countdown to Ibiza 2023...</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@1,700&display=swap" rel="stylesheet">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <style> @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@1,700&display=swap'); </style>
  </head>
  <body>
    <div class="container">
      <p class="para">Countdown to Ibiza...</p>
      <div class="box">
        <p id="days">Loading...</p>
        <p id="hms">Loading...</p>
      </div>
    </div>
  </body>
</html>

我的CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@1,700&display=swap');
body {
  padding: 0;
  margin: 0;
  background: rgb(238,174,202);
  background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
  font-family: 'Space Mono', monospace;
}
.container {
    display: flex;
    flex-direction: column;
    height: 80vh;
    align-items: center;
    justify-content: center;
    /* border: 1px solid black; */
  }
.para {
  margin: 0px 0px 10px 0px;
  font-size: 36px;
  text-shadow: 2px 2px rgba(0, 0, 255, .2);
}
.box {
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* border: 1px dotted black; */
    border-radius: 40px;
    padding: 0px 60px 0px 60px;
    background-color: white;
    margin: 0;
    box-shadow: 6px 6px 2px 1px rgba(0, 0, 255, .2);
}
#days {
  font-size: 80px;
  margin-top: 30px;
  margin-bottom: 30px;
  /* border: 1px solid black; */
}
#hms {
  margin-top: 0px;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  /* font-weight: 500; */
}
@media only screen   and (device-width: 390px)   and (device-height: 844px)   and (-webkit-device-pixel-ratio: 3) {
    .container {
      height: 60vh;
    }
    .para {
      font-size: 56px;
      font-family: 'Space Mono', monospace;
    }
    #days {
      font-size: 160px;
      font-family: 'Space Mono', monospace;
    }
    #hms {
      font-size: 40px;
      font-family: 'Courier New', Courier, monospace;
    }
  }
/* 2778x1284 pixels at 458ppi */
@media only screen   and (device-width: 428px)   and (device-height: 926px)   and (-webkit-device-pixel-ratio: 3) {
    .container {
      height: 60vh;
    }
    .para {
      font-size: 56px;
      font-family: 'Space Mono', monospace;
    }
    #days {
      font-size: 160px;
      font-family: 'Space Mono', monospace;
    }
    #hms {
      font-size: 40px;
      font-family: 'Courier New', Courier, monospace;
    }
  }

问题排查与修复方案 #

1. 重复引入字体引发冲突 #

你在三个位置重复引入了Space Mono字体：

• HTML中的<link>标签
• HTML内部<style>标签的@import语句
• CSS文件开头的@import语句

重复资源引入会导致移动浏览器加载逻辑混乱，尤其是Safari对重复资源的处理更为严格。只保留一种引入方式即可，推荐保留HTML中的<link>引入（带preconnect预加载，加载效率更高），删除另外两处的@import代码。

2. 字体样式未明确指定 #

你请求的是Italic 700字重的Space Mono，但CSS中仅指定了font-family，未明确标注font-style和font-weight。部分移动浏览器可能会默认匹配常规样式，导致字体不匹配而回退。可以在目标元素的CSS中补充：

body {
  font-family: 'Space Mono', monospace;
  font-style: italic;
  font-weight: 700;
}

3. 媒体查询适配范围过窄 #

你编写的媒体查询仅针对特定设备尺寸，大部分移动设备无法触发这些规则。虽然这不是字体不加载的核心原因，但建议改用基于视口宽度的响应式规则（比如@media (max-width: 768px)），覆盖更多设备场景。

4. Safari字体加载细节检查 #

Safari对Google Fonts加载有特殊要求：

• 你已正确设置crossorigin属性，这部分无需调整
• 可以通过Safari开发者工具的「网络」面板，查看.woff2字体文件是否成功加载，若出现404或加载报错，需确认字体URL参数是否正确（你的参数ital,wght@1,700是正确的）

最终修复步骤 #

1. 删除HTML内部<style>标签中的@import代码
2. 删除CSS文件开头的@import代码
3. 在CSS的body或目标元素样式中，明确添加font-style: italic; font-weight: 700;
4. 将固定尺寸的媒体查询改为基于视口宽度的响应式规则（可选，但推荐）

完成以上操作后，移动浏览器即可正常加载Space Mono字体。

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