Safari字體重量問題，文字太粗體

當我應用font-weight:bold樣式時，與其他瀏覽器相比，Safari的字體外觀過於粗糙。我試着在一些網站中建議的CSS下面，但它仍然是一樣的。Safari字體重量問題，文字太粗體

text-shadow: #000000 0 0 0px;

文本渲染的屏幕截圖：

鉻
enter image description here

Safari瀏覽器
enter image description here

這裏是我的CSS聲明：

p { 

margin: 8px 5px 0 15px; 
color:#D8D2CE; 
font-size:11pt; 
letter-spacing:-1px; 
font-weight: bold; 
font-family: LektonRegular; 
} 

@font-face { 
font-family: 'LektonRegular'; 
src: url('myfonts/lekton-regular-webfont.eot'); 
src: url('myfonts/lekton-regular-webfont.eot?#iefix') format('embedded-opentype'), 
    url('myfonts/lekton-regular-webfont.woff') format('woff'), 
    url(myfonts/lekton-regular-webfont.ttf) format('truetype'), 
    url('myfonts/lekton-regular-webfont.svg#LektonRegular') format('svg'); 
font-weight: normal; 
font-style: normal; 

}

這怎麼解決？

來源

2012-02-26 user1184100

只有在Safari瀏覽器中才能觀察到此問題！ – user1184100 2012-02-26 05:09:26

您是否得到解決這個問題？ – 2017-07-06 08:51:01

要在整個瀏覽器中一致地呈現粗體文本，您的字體應該明確地包含粗體字符。否則，瀏覽器可能會嘗試根據其正常變體制作粗體字符變體，並且跨瀏覽器的結果不一致，因爲它們可能有不同的算法用於此類轉換。

另請注意，系統級別上的不同平臺（例如Windows，Mac OS）上的文本呈現可能會有所不同。這種差異是確定的，通常不需要修正。請參閱topic about -webkit-font-smoothing property。

來源

2012-02-26 09:10:59

確實，不提供自定義字體的大膽變體會強制瀏覽器生成粗體文本的「仿粗體」字體，這可能看起來像有點奇怪。但它不能解決Safari默認渲染所有文本比其他瀏覽器更胖的問題 - Paul的答案將解決這個問題。 – 2012-12-14 18:36:27

@OlaTuvesson使用操作系統默認渲染渲染頁面完全可以。這是不必要的，甚至是有害的，由Web開發人員來控制。此外，供應商前綴的屬性將來可能會被刪除或更改，因此基於它們的解決方案不具備未來的可行性。 – 2012-12-14 18:45:20

我真的不同意;我的大部分客戶都非常熱衷於在所有平臺上（儘可能）保持品牌標識 - 是的，這包括字體及其重量。此外，Safari中的過度粗暴會使文本更難以閱讀，並且通常看起來相當垃圾。 – 2012-12-14 19:19:37

使用-webkit-font-smoothing: antialiased;

的文字陰影招行不通了。

來源

2012-02-26 05:09:30

謝謝保羅！ ..試了上面的CSS，但似乎無法找到任何區別：| – user1184100 2012-02-26 05:13:28

這絕對符合我的經驗。萬分感謝，並讚揚你和你的房子。 – 2012-03-02 17:30:30

也適用於我（div元素，而不是@ font-face） – Kevin 2012-07-02 23:11:28

這裏沒有任何答案適用於我。可能是因爲我正在使用Windows版本的Safari進行測試。我不得不在我的CSS中加入粗體字來解決問題。在原來的問題的情況下，他將需要添加以下（注意它使用相同的字體家族名稱）

@font-face { 
font-family: 'LektonRegular'; 
src: url('myfonts/lekton-bold-webfont.eot'); 
src: url('myfonts/lekton-bold-webfont.eot?#iefix') format('embedded-opentype'), 
    url('myfonts/lekton-bold-webfont.woff') format('woff'), 
    url(myfonts/lekton-bold-webfont.ttf) format('truetype'), 
    url('myfonts/lekton-bold-webfont.svg#LektonRegular') format('svg'); 
font-weight: bold; 
font-style: normal; 
}

這個工作在所有瀏覽器對我來說。

來源

2014-10-22 19:55:25 nuander

-webkit解決方案不適用於很多谷歌字體，自定義字體和沒有預設值的字體的強大問題。

問題是您需要在強標記中指定粗體的值。

這可以通過兩種方式來完成：

您可以從谷歌的字體或任何你的字體是從您的標題包括：它需要雙方的常規字體和粗體每個人都應該有一個像400定期和600大膽例如不同的字體，重號：

<link href="https://fonts.xxx.com/css?family=XXX:400,600" rel="stylesheet">

或者使用aboves源代碼，粘貼到自己的CSS象下面這樣：

@font-face { 
    font-family: 'XXX'; 
    font-style: normal; 
    font-weight: 600; 
    src: local('XXX SemiBold'), local('XXX-SemiBold'), 
    url... 
}

使用任何你的字體而不是XXX。

然後還強{font-weight:600;}

來源

2017-05-03 08:23:22 Beth

Safari字體重量問題，文字太粗體

回答

相關問題