手机上的字体粗细太粗

Question

我正在使用的压缩字体（芒果怪诞，可变）（没有响应？）。

我希望它的行为方式与我通过检查元素查看它时的方式相同。我已经在 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);
}

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

Answer 1

可能无法自动检测可变字体粗细范围

某些浏览器实际上可能会自动检测字体文件作为可变字体，并读取默认粗细轴值 - 而其他浏览器则不能。

iOS safari 对于不太具体的

@font-face

规则往往不太“宽容”。
顺便提一句。 iOS 上的每个浏览器都采用 safari/webkit 引擎 - 因此您会遇到完全相同的渲染问题。然而，有一些“努力”（……提起诉讼）试图改变这一点（2024 年）。

1.添加指定范围的 font-weight 属性值

理想情况下，您应该检查字体文档以找到正确的最小值和最大值 - 这些不是标准化的。某些 VF 字体可能使用 100–1000 之间的范围，其他字体可能使用 300–800 之间的范围。

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

示例：可变字体粗细

inputWeight.addEventListener('input', e => {
  let val = +e.currentTarget.value
  prev.style.fontWeight = val

})

@font-face {
  font-family: "Mango Grotesque";
  font-weight: 100 900;
  src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
  font-style: normal;
  font-display: swap;
}

.p {
  font-family: "Mango Grotesque";
  font-size: 5em;
  font-weight: 400;
  margin: 0;
}

.wgh100 {
  font-weight: 100;
}

.wgh200 {
  font-weight: 200;
}

.wgh300 {
  font-weight: 300;
}

.wgh400 {
  font-weight: 400;
}

.wgh500 {
  font-weight: 500;
}

.wgh600 {
  font-weight: 600;
}

.wgh700 {
  font-weight: 700;
}

.wgh800 {
  font-weight: 800;
}

.wgh900 {
  font-weight: 900;
}

<p><label>Dynamic font weight</label><input id="inputWeight" type="range" min="100" max="900" value="400"></p>
<p id="prev" class="p">DAYSIDE</p>

<p class="p wgh100">DAYSIDE</p>
<p class="p wgh200">DAYSIDE</p>
<p class="p wgh300">DAYSIDE</p>
<p class="p wgh400">DAYSIDE</p>
<p class="p wgh500">DAYSIDE</p>
<p class="p wgh600">DAYSIDE</p>
<p class="p wgh700">DAYSIDE</p>
<p class="p wgh800">DAYSIDE</p>
<p class="p wgh900">DAYSIDE</p>

您还可以通过 font-variation-settings 属性控制可变字体粗细，如下所示：

font-variation-settings: 'wght' 400;

2.确保可变设计轴在转换过程中不会被剥离

不幸的是，许多出色的转换器（2024 年）仍然不完美支持可变字体。因此，当将可变字体

ttf/truetype

文件转换为

woff2

时，您可能会得到一个“静态”/单重字体，缺少用于无缝权重插值的轴数据。