Chrome大膽渲染白色文字

因此，我正在研究一個以HTML/CSS編碼的網頁設計，並且我想問問是否有任何CSS解決方法可以讓Chrome不會過於大膽地渲染白色文本。基本上，Chrome渲染文本的方式看起來很醜陋，而且我希望它看起來像或幾乎像Firefox或Safari一樣，看起來更薄更好。這裏有一個形象或多或少我想達到的目標： enter image description here Chrome大膽渲染白色文字

編輯：

代碼：

<head> 

    <meta charset='UTF-8'/> 

    <title></title> 

    <style> 

     body { 
      background-image: url("image.jpg"); 
      background-size: 100%; 

      font: 13px Verdana; color: #FFFFFF; 
     } 

     .content { 
      width: 1024px 
      margin: 0 auto; 
      padding: 8px 16px; 
     } 

     .scape { 
      width: 544px; 

      margin: 256px auto; 
      padding: 8px 16px; 

      background-color: rgba(0, 0, 0, 0.8); 
     } 

    </style> 

</head> 

<body> 

    <div class='content'> 

     <div class='scape'> 

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis tellus a tortor iaculis, non sodales risus porttitor. Maecenas vel mauris nec ligula ultricies dictum. Ut ornare vel risus et malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque consectetur, dui in tristique fermentum, odio augue tempus nulla, ut vestibulum magna turpis vitae dolor. Integer quis nisi nisi. Praesent sit amet vestibulum ipsum. Quisque in pharetra massa, ac blandit augue. Sed vitae leo mattis, luctus dolor vel, ullamcorper ante. 

     </div> 

    </div> 

</body>

我希望Chrome瀏覽器渲染字體更好，更薄就像其他兩個瀏覽器一樣。我嘗試添加諸如「-webkit-font-smoothing：none;」，「text-shadow：0 0 0＃000;」，「font-weight：normal;」之類的東西。和「-webkit-text-stroke：-1px;」但沒有任何改變。

來源

2013-10-27 ChallengeHunter22

請包括重新編譯此問題的代碼，更多詳細信息，並告訴我們您迄今爲止所嘗試/研究的內容。（您可以編輯您的問題以添加詳細信息。） – Jeroen

這很煩人，但是影響瀏覽器中字體呈現的許多因素（web用法，操作系統，瀏覽器，瀏覽器版本，系統字體設置）幾乎不可能在所有操作系統中的所有瀏覽器中獲得完全相同的結果。你不需要那個！您的文字看起來不錯並且可讀。 – Sliq

嗯，你是對的@Panique，但我仍然覺得它有點煩人，Chrome有很多錯誤和東西不能很好地工作，我想現在我會切換到Firefox作爲我的主要瀏覽器，至少直到他們解決。 – ChallengeHunter22

爲Chrome設置特定的font-weight。

使用JavaScript

if (navigator.appVersion.indexOf("Chrome/") != -1) { 
// font weight css for body or div here 
}

嘗試字體粗細sligtly比正常即300或200以下，看看有什麼效果。

來源

2013-10-27 09:02:07

爲.scape新增CSS：

-webkit-font-smoothing: antialiased;font-weight:100;

本應該做的工作。希望有所幫助。

UPDATE：

如果你把它想蘋果鉻只

，用一些jQuery的：

$(function(){ 
    if (window.navigator.userAgent.indexOf('Chrome') != -1) { 
     $('.scape').css('-webkit-font-smoothing', 'antialiased'); 
    } 
});

，並確保font-weight:100聲明在CSS文件.scape CSS規則。

希望有幫助。

來源

2013-10-27 09:03:04 geevee

在本例中，'font-weight'也會應用於Firefox。請注意，Verdana的重量不會超過400（常規）。 – Henrik

Chrome大膽渲染白色文字

回答

相關問題