Google网络字体在移动Safari和台式机Chrome上的呈现方式有所不同？

问题描述 投票：2回答：2

Google网络字体（Signika）在台式机和移动设备上的呈现方式有所不同。如这些屏幕截图所示，移动设备上的字距调整（字母之间的间隔）比台式机大，笔划更细。桌面上的字母也看起来更清晰，尽管这更主观。

台式机（Chrome）：

enter image description here

移动版（Safari，iOS 12 ：: >>

enter image description here

Codepen：

https://codepen.io/Crashalot/pen/3ff682e5aa123e1ac293ab19b06f1285

#pageBox h1 {
  margin: 30px auto;
  text-align: center;
}

h1 {
  font-size: 2em;
  font-weight: bold;
  line-height: 1.2em;
}

h1,
h2,
h3,
h4 {
  font-family: "Signika", Verdana, Tahoma, Arial, Sans-Serif;
  color: #7C7A7D;
}
<head>
  <link href="https://fonts.googleapis.com/css?family=Lato|Roboto|Signika|Source+Sans+Pro:400,700" rel="stylesheet">
</head>

<body>
  <div id="pageBox">

    <div class="header">
      <h1> Icon Editor </h1>
    </div>

  </div>
</body>

Google网络字体（Signika）在台式机和移动设备上的呈现方式有所不同。如这些屏幕截图所示，移动设备上的字距（字母之间的间隔）比台式机大，并且笔画为...

html css fonts font-face google-webfonts
2个回答
0
投票

我从您的问题中不确定您是否对为什么或如何解决方面更感兴趣。假设如何解决：

由于使用了字距调整，您可能已经意识到这一点，但是我可以通过调整以下内容来匹配外观：

0
投票

@@ shashalot之所以在Safari和Chrome上显示字体不同，是因为Webkit稍有不同。真正避免此问题的唯一方法是下载字体文件，然后将它们链接：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.