字體重量（不正確地）在蘋果Safari瀏覽器打火機只有

這個問題只存在於Mac的Safari瀏覽器。
其他瀏覽器/其他操作系統正常工作。字體重量（不正確地）在蘋果Safari瀏覽器打火機只有

問題：觀察頂部導航這裏的字體粗細：http://www.octa.com（WordPress的）

再觀察頂部導航這裏的字體粗細：http://www.octa.com/products（Magento的）

注，雖然他們由不同的代碼服務（WP vs Magento），這兩個頁面之間的CSS幾乎相同。

這裏的CSS中的相關內容：

nav.menu li a { 
    font-family: 'VegurLight','Myriad Pro',Arial,Helvetica,Sans-Serif; 
    font-size: 20px; 
    text-align: left; 
} 

nav.menu li a, #subnavwrapper nav li a { 
    color: #FFFFFF; 
    font-weight: normal; 
    height: 50px; 
    line-height: 50px; 
    padding: 0 46px 0 0; 
} 

nav li a { 
    display: block; 
    line-height: 1em; 
    text-decoration: none; 
} 

body { 
    color: #000000; 
    font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans- serif; 
    font-size: 14px; 
    line-height: 1.55em; 
    text-align: center; 
    background: black; 
}

注意，字體使用@字體面進口。

我用盡了一切 - 在SO和其他物品在這裏很多答案。請注意，無以下樣式從其他答案/資源收集糾正字體顯示。

font-variant:normal; 
-webkit-font-smoothing: antialiased; 
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;

來源

2013-10-01 cale_b

的網頁是在Win 7 Safari瀏覽器的不同，也：https://www.octa.com有字母，看起來導航項目雖然這看起來根據頁面上的一些動態變化而有所不同，但部分變得更加糟糕。（你應該已經解釋了你所看到的，而不是僅僅說「觀察」。）你應該找出CSS差異，並嘗試在簡單的設置中找出問題，而不是期望其他人調試你的網站。主頁上有26個標記錯誤，其中兩個似乎與對樣式表的引用有關。 –

@ JukkaK.Korpela - 謝謝。我假設你使用w3c驗證器來檢查標記是否有錯誤，或者你在使用其他工具嗎？而FYI，我做* *比較CSS，它是相同的。另外，我*做了嘗試和簡化，但簡化版本沒有同樣的問題。 –

您在問題中寫道「css幾乎完全相同」。如果它真的相同，那麼問題顯然是在其他地方 - 在代碼中沒有包含在問題中。 –

通過的意見/從@ JukkaK.Korpela打回原形，我發現了幾件事情：

首先，問題的根源是這樣的：將其加入到了

-webkit-backface-visibility: hidden;

代碼來解決每這個答案動畫問題：iPhone WebKit CSS animations cause flicker

不知道如何解決字體和解決FL icker，但我至少可以選擇現在要解決的問題。

其次，作爲一個狂熱的Firefox/Firebug的用戶，我已經在Safari中使用Firebug精簡版嘗試，以及其他分機，Safari和他們沒有工作。所以，大家在那裏誰可能試圖解決野生動物園只有問題，這裏有一個很大的提示：

Safari瀏覽器的「發展」的工具。直到我今天做了一些搜索之後才知道它，但它是工具欄中的一個菜單項。如果你沒有看到它，然後去首選項 - >高級，然後選中「在工具欄顯示'開發'菜單」

有了這個工具，我能夠排除故障並迅速解決這個問題。

來源

2013-10-01 14:18:33

嘗試-webkit-font-smoothing：antialiased;

我發現，這個簡單的變化作出Safari的font-weight屬性更可靠。

來源

2014-05-31 05:33:35 toakleaf

（我不能發表評論，所以我只能通過張貼我的研究結果添加到會話中。）

我發現文本固定位置元素似乎比在Safari其他類型的定位更輕重量。因此在其他地方建議不能忽視。

添加--webkit-font-smoothing: antialiased確實解決了這個問題，但它看起來比Firefox更輕。這可以固定-moz-osx-font-smoothing: grayscale

小提琴here，藉以說明問題 - 野生動物園只有

來源

2015-03-24 17:06:51

字體重量（不正確地）在蘋果Safari瀏覽器打火機只有

回答

相關問題