Chrome이 흰색 텍스트를 너무 담담하게 렌더링합니다.

HTML/CSS로 코딩 된 웹 디자인을 작업 중이므로 Chrome에서 너무 담담하게 흰색 텍스트를 렌더링하지 않도록 CSS로 해결 방법이 있는지 묻고 싶습니다. 기본적으로 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>

내가 크롬 글꼴 더 나은 렌더링하려면, 얇은 다른 두 브라우저에서와 마찬가지입니다. 나는 "-webkit-font-smoothing : none;", "text-shadow : 0 0 0 # 000;", "font-weight : normal;"과 같은 것을 추가하려고 시도했다. 및 "-webkit-text-stroke : -1px" 그러나 아무것도 바뀌지 않았다.

출처

2013-10-27 ChallengeHunter22

이 문제와 자세한 내용을 포함하고 지금까지 시도했거나 조사한 바를 알려주는 코드를 포함하십시오. (질문을 편집하여 세부 사항을 추가 할 수 있습니다.) – Jeroen

이것은 성가신 일이지만 브라우저에서 글꼴 렌더링 (웹 폰트 사용, OS, 브라우저, 브라우저 버전, 시스템 글꼴 설정)에 영향을 미치는 많은 것들이 거의 불가능합니다 모든 OS의 모든 브라우저에서 똑같은 결과를 얻을 수 있습니다. 그리고 당신은 그것을 필요로하지 않습니다! 당신의 텍스트는보기 좋고 읽을 수 있습니다. – Sliq

흠, 당신은 맞습니다 @Panique,하지만 여전히 다소 괴롭다는 것을 알았습니다. Chrome에는 많은 버그와 물건이 있습니다. 잘 작동하지 않습니다. 적어도 지금 Firefox를 기본 브라우저로 전환 할 것입니다. 그들이 그것을 고칠 때까지. – ChallengeHunter22

Chrome 용으로 font-weight을 지정합니다.

사용은 자바 스크립트

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

정상 즉, 300 또는 200에 비해 sligtly 작은 글꼴 두께를 시도하고 작동 기능을 참조하십시오. .scape에 대한

출처

2013-10-27 09:02:07

추가 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 (Regular)보다 더 가벼운 무게로 나오지 않습니다. – Henrik

Chrome이 흰색 텍스트를 너무 담담하게 렌더링합니다.

답변

관련 문제