2011-09-30 57 views
3

我很難解決這個問題。Safari中文本呈現不一致(5.0.5)

我工作http://movingwineforward.com,但它呈現文本不一致,你可以在這個截圖中看到:

error http://f.cl.ly/items/1t2u0p0B1d2a3a0S452B/laksdf.png

頁面加載後,在主菜單中的文字看起來薄(左)並且與其他操作系統和瀏覽器一致。但是當點擊時,它會變得比屏幕右側更重一些。

我檢查了樣式表和Safari瀏覽器(以及Chrome)DOM Inspector中的每個CSS屬性,它們都是相同的。

當我在Safari中禁用腳本時,文本像加重版本(右)一樣加載,所以我認爲這是干擾。 (我正在加載一些Vimeo flash播放器,以及其他腳本)。

爲了增加神韻,本網站是http://daf.cl的副本,它們都有完全相同的樣式表,DOM(標記),字體文件和Javascript。只有顏色和內容發生變化。但在http://daf.cl文本加載最初在較重的版本,並保持這樣。

我已經能夠在Safari 505上重現此行爲OSX Leopard

根據客戶要求,文字必須看起來像右邊那個(較重)。 我試過用CSS強制-webkit-font-smoothing文本渲染,但沒有任何技巧。字體重量看起來不太好,因爲它強制字體。

更新1:

我現在知道什麼時候該ocurrs:只有當在菜單後面的Vimeo的flash播放器,文本渲染更薄。如果沒有視頻背後,它看起來更重(應該)。也許這帶來了新的光芒。 (我嘗試禁用jQuery的Froogaloop爲Moogaloop,但沒有工作)

+0

我喜歡點擊版本的字體。 – Blender

+0

您可以嘗試刪除所有無關的樣式表和JavaScript,以查看問題是否消失。然後一次放回一個,直到問題恢復。 – Sparky

+0

@Blender你的意思是右邊那個,重一個?是的,這就是它應該看起來的樣子,但我不能強迫它看起來像那樣。 –

回答

0

雖然不是一個真正的解決方案,你可以嘗試添加類似

text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);

到文本。

2

首先,這樣做:

opacity: .99; 

將此應用於包含文本的對象將初始化它尋找的「較輕」。所以它不會以你喜歡的方式解決問題(堅持「常規」厚度),而是防止隨後的「反彈」到更輕的外觀變體。

現在,讓我們做一些調整:

text-shadow: 0 0 1px rgba(255, 255, 255, 0.75); 

在完全相同的顏色另外申請一個微妙的文字陰影的字體會導致文本看幾乎完全一樣你想要的。