css - @font-face 字母间距仅在移动浏览器上看起来更宽

Question

我正在使用@font-face 托管字体，并设置了一个媒体查询，当屏幕尺寸达到 (<) 特定宽度时，字体大小将缩小。

在 PC 上，跨浏览器看起来一切正常。但我认为字母间距并没有随着移动设备中字体大小的缩小而相应缩小。我检查过 iPhone 上的 chrome、safari 和 firefox，所有字母间距似乎都比应有的宽。

我一直在寻找解决方案，并且我已经尝试过:

1. 在 CSS 中使用 rem、em
2. 在子元素中使用 letter-spacing: normal
3. 使用媒体查询的反向代码从字体缩小切换到字体放大

这里有一些 CSS 代码供您引用。

@font-face {
  src: url(fonts/gilroy-extra-bold.ttf);
  font-family: gilroy-extra-bold;
}

/* h1 font CSS*/
h1 {
  font-family: gilroy-bold;
  color: #3F3F3D;

  font-size: 1.56em;
  text-align: center;
  letter-spacing: 0.001em;
}

/* when the font shrinks */
@media only screen and (min-width: 800px) {

  /* h1, 2, 3 text enlarge and shrink */
  h1 {
    font-size: 2.5rem;
  }

在 PC 上看起来像这样:例子

但是，在手机上:例子(你明白了..)

我知道浏览器以不同方式呈现字体，并且有人告诉我使用“网络安全”字体以避免所有麻烦。但是有没有使用@font-face 的解决方法？ JS?

Answer 1

我重新下载字体并重新编写代码:

@font-face {
  font-family: gilroy-bold;

  src: 
  url('fonts/Gilroy-Bold.woff2') format('woff2'),
  url('fonts/Gilroy-Bold.woff') format('woff'),
  url('fonts/Gilroy-Bold.ttf') format('truetype');

  font-weight: 700;
  font-style: normal;
}

and it worked now!