Webfont位置渲染问题

我在我的页面上使用了自定义的webfont，并且在不同的平台上有一些渲染问题。在Linux和Windows中，块中文本的对齐方式有些不同。这里有一个例子：Webfont位置渲染问题

的Chrome在Linux中： enter image description here

的Chrome在Windows： enter image description here

他们正在使用的字体（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; 
}

有什么办法解决？

来源

2014-09-19 Guilherme Vierno

看来你的代码有问题。但是，除非我们有[可以重现问题的代码或信息]（http://stackoverflow.com/help/mcve），否则我们无法提供帮助。否则，我们只是盲目猜测。 – gunr2171 2014-09-19 14:31:33

这取决于它们是否都使用相同版本的字体 - 也就是说可以使用svg版本，另一个可以使用woff版本，在这种情况下，它们将呈现不同的效果。然后你需要检查默认的行高和元素的垂直对齐是相同的 - 行高看起来相同，但看起来是垂直对齐的中间和顶部 – Pete 2014-09-19 14:43:56

我也有这个问题，我终于发现它自己，它可能是对你的一些使用：http://stackoverflow.com/questions/7220937/why-does-my-custom-font-have-a-positional-offset-in-some-browsers。 – Gerard 2014-09-19 22:57:01

这可以通过WebKit的原因引起：

试试这个。其默认值为subpixel-antialiased。尝试设置：

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

替代解决方案

如果以上不工作，那么这可能会工作，我也有类似的问题，与镀铬前，随机发现的INTERENT此修复程序。不知道在哪里，但它基本上迫使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'); 
    } 
}

来源

2014-09-19 14:44:56 DavidT

我试过没有成功，我认为字体本身存在一些问题。 – 2014-09-22 15:09:56

@GuilhermeVierno - 我曾经有过类似的问题，我认为这是由于字体本身，但我找到了一个奇怪的修复。我编辑了上面的解决方案来包含这一点。希望能帮助到你。 – DavidT 2014-09-22 15:47:48

是的！另一种解决方案就像一个魅力。非常感谢你！这是一个非常奇怪的修复... – 2014-09-23 12:41:01

浏览器呈现不同的元素 - 即使它使用相同的浏览器也可能是问题。在CSS中定义边距，填充和行高 - 您可以使用'reset.css'。当呈现自定义字体尝试使用-webkit-font-smoothing

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

来源

2014-09-19 14:36:02 jan199674

我使用引导程序的重置，元素的样式是相同的。 – 2014-09-22 15:09:01

Webfont位置渲染问题

回答

相关问题