html - Webfont位置渲染问题

Question

我在页面上使用自定义的网络字体，但在不同平台上遇到一些渲染问题。 Linux 和 Windows 中 block 中文本的对齐方式有些不同。这是一个例子:

Linux 中的 Chrome:

Windows 中的 Chrome:

它们都使用相同版本的字体 (otf)，样式完全相同(相同的行高和边距)。

这是字体的来源:

@font-face {
  font-family: 'Calibre Regular';
  src: url('fonts/Calibre-Regular.eot') format('embedded-opentype'),
       url('Calibre-Regular.otf')  format('opentype'),
       url('fonts/Calibre-Regular.woff') format('woff'),
       url('fonts/Calibre-Regular.ttf')  format('truetype'),
       url('fonts/Calibre-Regular.svg#Calibre-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

有什么办法可以解决这个问题吗？

Answer 1

这可能是由 webkit 在渲染自定义字体时尝试使用 -webkit-font-smoothing 引起的。其默认值为subpixel-antialiased。尝试设置:

h1,h2,h3,h4,h5,h6 {
    -webkit-font-smoothing: antialiased;
}

替代解决方案

如果上面的方法不起作用，那么这可能会起作用，我之前在 chrome 上也遇到过类似的问题，并在互联网上随机发现了此修复程序。不确定在哪里，但它基本上强制 Chrome 使用该字体的 SVG 版本。

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'nameOfFontFamily';
        src: font-url('url/to/svgfont.svg') format('svg');
    }
}