Safari瀏覽器在光標處加上一條光@ font-face字體

由於某些原因，Safari在轉換過程中將光線@ font-face字體加粗。Safari瀏覽器在光標處加上一條光@ font-face字體

http://fine-grain-2.myshopify.com

這裏是我的@ font-臉聲明：

@font-face { 
font-family: Avenir; 
font-weight: normal; 
font-style: normal; 
src: url("AvenirLTStd-Medium.otf") format("opentype"); 
} 

@font-face { 
font-family: AvenirBold; 
font-weight: normal; 
font-style: normal; 
src: url("AvenirLTStd-Black.otf") format("opentype"); 
} 

@font-face { 
font-family: AvenirLight; 
font-weight: lighter; 
font-style: normal; 
src: url("AvenirLTStd-Light.otf") format("opentype"); 
}

當你將鼠標懸停在產品圖片，你可以一秒鐘後看到Safari瀏覽器加入大膽的文字

下面是我在CSS中聲明字體系列的地方：

body { 
    background: none repeat scroll 0 0 #999999; 
    font-family: AvenirLight; 
    font-weight: lighter; 
}

來源

2013-03-01 novicePrgrmr

該頁面相當複雜。嘗試將問題簡化爲簡單的測試用例。 – 2013-03-01 19:12:02

我會想象你的問題是WebKit的抗鋸齒。具體來說，在轉換或轉換過程中，抗混疊僅爲全像素，但當元素上沒有轉換或轉換時，LCD顯示屏將默認使用子像素抗混疊。

亞像素抗鋸齒通常是你想要的，因爲它有助於可讀性，但是當一個參與轉換的東西停止時，亞像素抗鋸齒接管，差異就會激化。

使用-webkit-font-smoothing: antialiased;對問題元素只有強制全像素抗鋸齒始終，你會失去這種轉變。請參閱this page，以獲得有關Safari對抗鋸齒的詳細說明。

來源

2013-03-01 22:36:22

哇，你是男人！謝謝！任何你可以做這樣的火狐？ – novicePrgrmr 2013-03-01 22:48:44

我不認爲FF通過CSS提供任何抗鋸齒控制。另一方面，我沒有注意到FF中出現這個問題。這很奇怪，因爲在我看來，Safari通常具有更美觀的渲染效果。 – 2013-03-02 15:23:36

這是發生在FF爲Mac和它相當惱人的問題。我可能只是讓它現在滑動，看看它是否在未來的版本中糾正自己。再次感謝！ – novicePrgrmr 2013-03-02 15:34:32

，我可以發現有一件事是在：

@font-face { 
    font-family: AvenirLight; 
    font-weight: lighter; 
    font-style: normal; 
    src: url("AvenirLTStd-Light.otf") format("opentype"); 
}

打火機是不是爲font-weight屬性的有效值。這種情況下的有效值爲：normal |粗體| 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

更多細節here在4.4節

來源

2013-03-01 19:23:37

閱讀那裏的規格W3鏈接或嘗試驗證。 – 2013-03-01 19:49:34

您正在查看錯誤的部分。我告訴過你在4.4節的內容。你對嵌入字體感興趣，而不是實際的屬性。以下部分是從doc上面的文檔本身添加的：不允許使用相對關鍵字，'更大膽'和'更輕'。以下是驗證屏幕截圖：[鏈接]（http://i.imgur.com/6WiQxcu.png?1） – 2013-03-01 19:59:38

沒問題。畢竟，如果這是網頁的問題，我很好奇。 – 2013-03-01 20:10:56

儘量避免使用-webkit-font-smoothing: antialiased;，因爲字體權重在不同的瀏覽器上會不一致。

我發現問題只發生在不透明屬性的轉換中。在某些情況下，rgba背景可能會起作用。

來源

2014-05-28 12:27:13

Safari瀏覽器在光標處加上一條光@ font-face字體

回答

相關問題