顯示藍色文字的Webkit瀏覽器略顯紫色

我無法在Google上找到關於此問題的任何信息，因爲每個結果都是關於默認的紫色a:visited顏色。這不是問題。問題在於Chrome的默認抗鋸齒功能，在某些系統上，藍色文字顯示爲藍紫色。如果我將抗鋸齒更改爲-webkit-font-smoothing: antialiased，它會保持正確的顏色，但Chrome和Firefox之間的字體完全不同。我使用的藍色是客戶的顏色，所以它不能像這樣變成紫色。我希望有人對此有所解決。顯示藍色文字的Webkit瀏覽器略顯紫色

下面是測試截圖我所做的：

編輯：只是爲了澄清，這有什麼好做的默認a:visited鏈接的顏色。我的藍色正在繼承，但Chrome的反鋸齒正在導致文本顯示爲紫色。這裏有一個例子：http://jsfiddle.net/yvjjxfqt/

來源

2015-08-14 Gavin

後所有的CSS應用上的文字屬性。 –

@LaurentiuL。檢查編輯。該顏色是唯一的CSS樣式。就像我之前提到的，這不是一個顏色繼承問題。從我所看到的這是一個反鋸齒問題。我發佈的jsfiddle具有相同的紫色文本問題。 – Gavin

愚蠢的審查審計吃了我的評論......無論如何，在Windows上，這看起來像是與ClearType的交互，因爲示例中的水平線在兩個瀏覽器上都具有正確的顏色，而垂直線強烈地是亞像素 - 在Chrome上是別名，但只有Firefox稍微如此。（同樣，如果關閉ClearType，則Firefox也會禁用抗鋸齒功能，而Chrome不會。） – Neil

它得到解決（至少在我的系統）設置中的元素

a { 
 
    color: #1967b1; 
 
    display: block; 
 
} 
 

 
a:nth-child(2) { 
 
    transform: rotateX(0deg); 
 
}

<a href="#">This is a link</a> 
 
<a href="#">This is a link</a>

我想，在GPU渲染沒有變換這個問題

這是它的外觀在我的系統

另一種方式來解決這個問題好像是用不透明

a { 
 
    color: #1967b1; 
 
    opacity: 0.99; 
 
}

<a href="#">This is a link</a>

來源

2015-08-18 15:58:56 vals

爲什麼你使用rotate而不是transform3d（強制硬件加速更常見的技巧）？只是好奇。 – Dre

@Dre不是真的......可能厭倦了看到translateZ（0）.. – vals

請注意，這隻適用於元素具有塊類型顯示設置。當元素設置爲'display：inline;'時，此解決方案不起作用。 – IMI

顯示藍色文字的Webkit瀏覽器略顯紫色

回答

相關問題