Html &引用；“拉托”；谷歌字体在Safari与Chrome中垂直拉伸
几年来，我一直在使用谷歌字体的Lato，我的网站在Safari和Chrome（在Mac上）之间看起来基本相同。Lato在两个系统上都按预期呈现 我从High Sierra升级到了Mojave，现在Safari（两种情况下都是v13）似乎以较低的尺寸渲染Lato。它看起来像是12px到16px左右的点大小，垂直拉伸字体，看起来很糟糕 （iOS上的Safari和Chrome可以正确渲染。） 在两种浏览器中，用于Lato的Google demo页面都能以预期的点大小正确呈现： 注意：这不是浏览器之间常见的“字体重量”问题。示例代码中的平滑选项在浏览器之间匹配此问题，因此它们看起来相同 下面是一个具有代表性的精简代码HTML示例，演示了这些差异，以及一个覆盖文本的图形，这样您就可以更容易地看到这些差异 （例如，观察“14px”文本，观察正在进行的垂直拉伸。） 我一直在使用各种别名、亚像素渲染、字体平滑选项，但没有任何东西能改变Lato的渲染效果，使其在Safari中看起来像预期的那样。（非视网膜屏幕）。这只会让我的网站看起来又长又丑，而且让人不安（！） 有人知道这里发生了什么吗 谢谢Html &引用；“拉托”；谷歌字体在Safari与Chrome中垂直拉伸,html,google-chrome,safari,webfonts,google-webfonts,Html,Google Chrome,Safari,Webfonts,Google Webfonts,几年来，我一直在使用谷歌字体的Lato，我的网站在Safari和Chrome（在Mac上）之间看起来基本相同。Lato在两个系统上都按预期呈现 我从High Sierra升级到了Mojave，现在Safari（两种情况下都是v13）似乎以较低的尺寸渲染Lato。它看起来像是12px到16px左右的点大小，垂直拉伸字体，看起来很糟糕 （iOS上的Safari和Chrome可以正确渲染。） 在两种浏览器中，用于Lato的Google demo页面都能以预期的点大小正确呈现： 注意：这不是浏览器之间
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic,900&subset=latin' rel='stylesheet' type='text/css'>
<style>
body{
background:#262626!important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family:Lato;
color: white;
}
p {
font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
}
</style>
</head>
<body>
<h4 style='font-size: 10px;'>H4 Example marmite dumplings 10px</h4>
<h4 style='font-size: 12px;'>H4 Example marmite dumplings 12px</h4>
<h4 style='font-size: 13px;'>H4 Example marmite dumplings 13px</h4>
<h4 style='font-size: 14px;'>H4 Example marmite dumplings 14px</h4>
<h4 style='font-size: 16px;'>H4 Example marmite dumplings 16px</h4>
<h4 style='font-size: 20px;'>H4 Example marmite dumplings 20px</h4>
</body>
</html>
身体{
背景：#262626！重要；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
字体系列：Lato；
颜色：白色；
}
p{
字体大小：400；
}
h1、h2、h3、h4、h5、h6{
字号：700；
}
H4示例marmite饺子10px
H4示例marmite饺子12px
H4示例marmite饺子13px
H4示例marmite饺子14px
H4示例marmite饺子16px
H4示例marmite饺子20px
注意：如果我在响应设计模式下预览，在模拟视网膜视图（2x）中查看，字体似乎会缩小，看起来比1x视图更正确。这让我觉得这是一个奇怪的macOS非视网膜缩放问题，似乎影响了Lato。但为什么它只会影响我的页面，当它在谷歌的Lato demo页面的两个浏览器上都正确呈现时？奇怪…我无法重现您的问题，尽管我确实看到在20px+上有非常小的内核差异-但与您的示例图像完全不同。您是否100%确定您的服务器在CDN提供文件之前没有可能正在加载的本地版本的Lato？我知道Chrome和Safari在这方面可能会有不同的行为是不符合逻辑的，但消除这种可能性是很好的，因为谷歌总是在讨价还价。谢谢你的回复和检查-是的，我不担心细微的内核差异。我还检查了在同一网络上运行Sierra和Safari 12的另一个非视网膜Mac，这也显示了拉托。无论我的站点是从我的web主机提供服务，还是从我的本地开发主机提供服务，它的行为都是相同的。真奇怪。我没有本地版本的Lato，我知道并清空尽可能多的本地缓存，但我会四处搜寻…除了简单的
font-family@font-facesrc字体系列@font-facesrc