Webfont位置渲染问题

Question

我在自己的网页上使用了自定义的webfont，并且我在不同的平台上遇到了一些渲染问题。在linux和windows中，块中文本的对齐方式有所不同。这是一个例子：

Linux中的Chrome：

Windows中的Chrome：

他们都使用相同版本的字体（otf），样式完全相同（相同的行高和边距）。

这里是font-face的来源：

@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-font-smoothing渲染自定义字体时，这可能是由webkit引起的。其默认值为subpixel-antialiased。尝试设置：

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

替代解决方案

如果上述方法不起作用，那么这可能会有效，我之前有一个类似的问题，并且随机在互联网上发现了这个问题。不知道在哪里，但它基本上迫使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');
    }
}

Answer 2

浏览器渲染元素不同 - 即使它是相同的浏览器也可能是问题。在CSS中定义边距，填充和行高 - 您可以使用＆＃39; reset.css＆＃39;。

试试这个：

p,h1,h2,h3,h4,h5,h6  {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}