@字体-正面字母间距仅在移动浏览器上看起来更宽

Question

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

在个人电脑上，所有浏览器看起来都很好。但我认为，随着移动设备字体尺寸的缩小，字母间距并没有相应缩小。我在iPhone上查看了chrome、safari和firefox，所有的字母间距似乎都比它应该的要宽。

我一直在寻找解决办法，我试过：

1. 在CSS中使用rem、em
2. 使用字母间距:子元素中的法线
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上看起来是这样的:例如

但是，在手机上:e a m p l e(你知道.)

我知道浏览器呈现字体的方式不同，我被告知要使用“网络安全”字体来避免所有的麻烦。但是，使用“字体脸”有解决办法吗？JS？

Answer 1

如果您使用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;
  }
}

Answer 2

我重新下载我的字体并重新编写代码如下：

@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!