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

我使用@ font-face托管字体，并设置了媒体查询，当屏幕尺寸达到（
在PC上，在所有浏览器上看起来都不错。但是我认为随着移动设备中字体大小的缩小，字母间距并没有相应缩小。我已经检查了iPhone上的chrome，safari和firefox，所有字母间距似乎都比应该的宽。

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


在CSS中使用rem，em
使用字母间距：在子元素中正常
使用媒体查询的反向代码从字体缩小切换到字体放大


以下是一些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上看起来像这样：
例

但是，在移动设备上：
e x a m p l e
（你知道这个主意..）

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

最佳答案

如果改用px并根据屏幕尺寸调整值怎么办？

h1 {
  font-family: gilroy-bold;
  color: #3F3F3D;
  font-size: 1.56em;
  text-align: center;
  letter-spacing: .5px;
}

@media only screen and (min-width: 800px) {
  h1 {
    font-size: 2.5rem;
    letter-spacing: 1px;
  }
}

关于css - @ font-face字母间距仅在移动浏览器上看起来更宽，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57462397/