模糊字體問題

Question

我使用@字體面加載網頁字體被正確加載：

@font-face { 
font-family: 'HelveticaNeueLight'; 
src: url('fonts/HelveticaNeueLight/helveticaneuelight.eot'); 
src: url('fonts/HelveticaNeueLight/helveticaneuelight.eot') format('embedded-opentype'), 
    url('fonts/HelveticaNeueLight/helveticaneuelight.woff') format('woff'), 
    url('fonts/HelveticaNeueLight/helveticaneuelight.ttf') format('truetype'), 
    url('fonts/HelveticaNeueLight/helveticaneuelight.svg#HelveticaNeueLight') format('svg'); 

font-weight: normal; 
font-style: normal; 
font-variant:normal; 

}

我也有另外一個類的風格和大膽的文字：

.BusinessLeftHeader{ 
    font-family: HelveticaNeueLight; 
    font-size: 32px; 
    padding: 30px 0 5px; 
    text-align: center; 
    line-height: 1; 
    font-variant: normal;  
} 

現在的問題是，字體不看好iPad 2的大膽它看起來像文本與模糊效果，或者類似這樣的東西展示。

我也有使用此代碼來解決這個問題。

-moz-font-smoothing: none; 
font-smoothing: antialiased; 
-webkit-font-smoothing: antialiased; 

但是，仍然有同樣的問題。 iPad 2上的文字看起來不太好。當我放大時，看起來很好。

Answer 1

有幾個方面的考慮在這裏，首先你有衝突的樣式設置：

-moz-font-smoothing: none; 
font-smoothing: antialiased; 
-webkit-font-smoothing: antialiased; 

他們都應該被設置爲antialiased或none。

你還聲明你希望有一個粗體字體，但是你沒有設置font-weight風格，並且正在使用一種叫做HelveticaNeueLight的字體，我想它的名字不是粗體，也不包括粗體。你至少需要設置：

font-weight:bold

此外，該問題可能是您正在使用的自定義字體是不是一個大膽的版本包裝。在這種情況下，瀏覽器通常會「解釋」應該如何使用可用的字體呈現大膽的版本，從而產生意想不到的結果。您可能希望包含字體的粗體版本，或者在包含字體的情況下引用特定權重。