Q

相同的字體，字符間距和行高，但結果不同

html
css

2012-06-05 38 views 2 likes

2

在CSS3中引入@ font-face，可讓網頁設計人員使用在所有瀏覽器中看起來相同的字體。這就是我認爲直到jsFiddle用下面的代碼嘗試一下：相同的字體，字符間距和行高，但結果不同

HTML：

<div> 
    The_Quick_Brown<br> 
    Fox_Jumps_Over<br> 
    The_Lazy_Dog 
</div>

CSS：

@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff'); 
} 

div { 
    display: block; 
    width: 496px; 
    height: 86px; 
    font-size: 1.3em; 
    font-family: 'Open Sans'; 
    font-style: normal; 
    margin: 0; 
    border: 0; 
    padding: 0; 
    background: cyan; 
    letter-spacing: 1.44em; 
    line-height: 1.44; 
    overflow: hidden; 
}

Firefox 12.0

這是從Firefox 12.0查看。注意棕色部分遮蓋的'o'，'狗'的'g'的位置和底部邊緣的下劃線'_'。

Google Chrome 19.0

這是谷歌瀏覽器19.0的看法。

儘管爲相同的字體明確設置了letter-spacing和line-height，爲什麼結果仍然不同？

2012-06-05 Question Overflow

+0

它可能更多地涉及渲染的div，然後其內容。 * MAYBE * – Playmaker

+0

字體渲染將取決於瀏覽器如何渲染它。並且因爲那些瀏覽器也以不同的方式呈現'letter-space'。我注意到，在FF中使用'monospace'字體時，您將無法獲得所需的結果，因爲FF不能正確支持'monospace'字體。這裏可能是類似的東西嗎？ – sarcastyx

+0

Chrome中的字符比FF中的字符要高一些。 – Brilliand

A

回答

3

您的代碼是正確的。問題在於你的瀏覽器/每個瀏覽器（瀏覽器渲染引擎都是特定的）以不同的方式呈現內容。您可能無法始終從每個瀏覽器獲得完全相同的輸出。這些功能和所有其他功能可能都是相同的，但在渲染網頁方面，它幾乎總是一個不同的故事。

2012-06-05 06:35:48 JudeJitsu

0

我們在這個問題上沒有什麼可做的。它完全取決於瀏覽器的文本渲染引擎。每個瀏覽器都以不同的方式呈現文字

2012-06-05 06:36:26 maksbd19

相關問題