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

Question

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

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

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

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

这里有一些 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 上看起来像这样：例子

但是，在移动设备上：例子（你明白了..）

我知道浏览器以不同方式呈现字体，有人告诉我使用 "web-safe" 字体以避免所有麻烦。但是有没有使用@font-face 的解决方法？ 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!

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

@font-face letter spacing looks wider only on mobile browser

css

mobile

browser

font-face

letter-spacing