iOS Safari 字体溢出答案

【问题标题】：Font overflow on iOS SafariiOS Safari 字体溢出
【发布时间】：2023-03-25 18:52:01
【问题描述】：

我对仅使用 Safari 浏览器的 iOS 设备上的字体系列 Interstate WGL Bd 有疑问。使用像Interstate Bd 这样的另一个字体系列就像一个魅力。不幸的是，我们不能使用Interstate Bd，因为某些字符（如č）渲染不正确。

我希望我可以让您访问当前状态，但不幸的是，该项目尚未向公众开放。另外，我不能添加小提琴，因为字体是许可的。

让我们解决问题：正如您在屏幕截图中看到的（在 Safari 中使用 iPad Air 1 制作），文本超出了按钮。

即使按钮没有固定宽度并且是display: inline-block;。

以前有人见过这个问题吗？

.button {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  display: inline-block;
  padding: 15px 20px;
  font-family: "Interstate WGL Bd", sans-serif;
  background: #008bd7;
  color: #ffffff;
  cursor: pointer;
  border: none;
  text-decoration: none;
  font-size: 16px;
}

.button:before {
  content: "+";
  font-family: "icon";
  display: inline-block;
  vertical-align: top;
  margin-right: 7px;
  font-size: 12px;
  font-weight: bold;
}

<section>
  <a class="button" href="#">
    <span>SOME BUTTON TEXT THAT IS OVERFLOWING THE BUTTON</span>
  </a>
</section>

【问题讨论】：

标签： html ios css fonts safari

【解决方案1】：

问题是由字体错误引起的。

我们的服务提供商（提供字体）已解决此问题。

我不能确切地说他们是如何做到的，因为“https://www.typenetwork.com/”没有给我们任何信息。

【讨论】：