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位置渲染問題

回答

相關問題