字体粗细在移动设备上太粗

问：

我使用的浓缩字体（芒果怪诞，可变）在桌面和响应式查看器上看起来不错，但是当我在移动设备上访问该网站时，字体粗细似乎太粗了（没有响应？我希望它的行为方式与我通过 inspect 元素查看它时的行为方式相同。我已经在 Chrome ios 和 Safari ios 上对此进行了测试，问题在两者上都仍然存在。我的字体CSS附在下面。

@font-face {
  font-family: "Hubot Sans";
  src: url("../fonts/HubotSans[slnt\,wdth\,wght].woff2") format("woff2");
}



@font-face {
  font-family: "Mango-Grotesque";
  src: url('../fonts/Mango Grotesque-VF.woff2') format('woff2');

}

body {
  font-family: "Hubot Sans", Arial, Helvetica, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  margin-top: 0;
}

p,
ul,
code,
ol {
  max-width: 40rem;
  line-height: 1.5;
  margin-bottom: var(--sp-3xl);
}

.large-title {
  font-size: 6.25rem;
}

.title-1 {
  font-size: 4.9375rem;
  font-weight: 600;
}

.title-2 {
  font-size: 3.8125rem;
  margin-bottom: var(--sp-lg);
  font-weight: 600;
}

.title-3 {
  font-size: 2.875rem;
  font-weight: 600;
}

.title-4 {
  font-size: 2.125rem;
  font-weight: 600;
}

.headline {
  font-size: 1.175rem;
  margin-bottom: var(--sp-sm);
  font-weight: 500;
}

p {
  line-height: 140%;
  max-width: 32rem;
}

p:not(p:last-of-type) {
  margin-bottom: var(--sp-sm);
}

p.label.orange {
  color: var(--primary-500);
}

small {
  font-size: 0.875rem;
  color: var(--text-tertiary);
  line-height: 1.0625rem;
  margin-bottom: var(--sp-base);
}

.hubot-sans {
  font-family: "Hubot Sans", Arial, Helvetica, sans-serif;
}

.hubot-sans-condensed {
  font-family: "Hubot Sans", Arial, Helvetica, sans-serif;
  font-stretch: condensed;
}

.mango-grotesque {
  font-family: "Mango-Grotesque", Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  text-rendering: optimizeLegibility;
}

em {
  font-style: italic;
  font-weight: bold;
}

.text-lg {
  font-size: 1.125rem;
}

.text-base {
  font-size: 1rem;
}

.text-sm {
  font-size: 0.9rem;
}

code {
  display: block;
  padding: var(--sp-sm);
  background-color: var(--zinc-900);
  border: 1px solid var(--zinc-700);
  margin-bottom: var(--sp-xl);
}

.large-title,
.title-1,
.title-2,
.title-3,
.title-4 {
  font-family: "Mango-Grotesque", Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  margin-bottom: var(--sp-xs);
  line-height: 90%;
  text-rendering: optimizeLegibility;
}

.headline,
label,
.subtitle,
.caption-text {
  font-family: "Hubot Sans", Arial, Helvetica, sans-serif;
}

.subtitle {
  font-size: 1.125rem;
  margin-bottom: var(--sp-xs);
  font-weight: 600;
}

.callout {
  font-family: "Hubot Sans", Arial, Helvetica, sans-serif;
  font-stretch: condensed;
  font-size: 1.125rem;
  line-height: 0.9375rem;
  margin-bottom: var(--sp-sm);
  font-weight: 600;
  letter-spacing: 0.0125rem;
  text-transform: uppercase;
}

strong {
  font-weight: 600;
}

.strikethrough {
  text-decoration: line-through;
}

.caption-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

.text-orange {
  color: var(--primary-500);
}

我尝试使用媒体查询来更改移动级别的字体粗细，但这似乎不是一个理想的解决方案。我也不相信该解决方案，因为通过桌面检查元素响应式查看器查看字体，字体似乎响应正确。