박스 섀도우에 영향을 미치는 글꼴 가중치

나는 드롭 그림자 효과를 내고있는 고정 된 네비게이션 막대를 가지고 있습니다. 그래도 잘 작동하지만 내부의 모든 텍스트에도 영향을 미치고 글꼴 두께가 더 얇아 보입니다.박스 섀도우에 영향을 미치는 글꼴 가중치

어떻게 글꼴을 변경하지 않을 수 있습니까?

HTML

<nav id="nav1" class="dropshadow">Hello World</nav> 
<button>toggle drop shadow</button>

CSS는

#nav1 { 
    position:fixed; 
    width:100%; 
    font-size:20px; 
    top: 0; 
    left: 0; 
    min-height:20px; 
    background:white; 
} 
button { 
    margin-top:50px; 
} 
.dropshadow { 
    -moz-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.1); 
    -webkit-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.1); 
    box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.1); 
    -moz-transition: all 0.2s linear; 
    -webkit-transition: all 0.2s linear; 
    transition: all 0.2s linear; 
}

출처

2014-05-17 Dex

모든 브라우저에서 글꼴 두께의 차이가 나타나지 않습니다. – BoltClock

@BoltClock 흠, OS X의 Safari에서 문제를보고 싶습니다. 실제 코드에서 Chrome에서도 문제가 발생합니다. – Dex

차이점은 OSX의 Safari에서만 나타납니다 (따라서 내 대답을 삭제 한 이유). 사파리 버그 일 수 있다고 생각합니다. – thexacre

나는 답을 발견했습니다 그것은 운영 체제 수준에서 몇 가지 문제를 포함한다. 내가 여기 솔루션을 업데이트했습니다

: http://jsfiddle.net/dvY4A/5/

가 걸린 모든이 #nav1 블록에 재산 -webkit-font-smoothing: antialiased;을 추가했다. http://lists.w3.org/Archives/Public/www-style/2012Oct/0014.html

을하지만 기본적으로, 텍스트, 그레이 스케일 및 서브 픽셀 - 안티 앨리어싱 두 가지 렌더링 모드가 있습니다 : 그것에 대해

자세한 내용은 여기에서 찾을 수 있습니다. 기술적 인 이유로 브라우저는 하드웨어 가속과 같은 특정 작업 중에 상자 그림자가 사용해야하는 두 항목을 전환하려고 시도합니다.

아직 해결 방법을 사용하고 있지만 어느 시점에서이 속성을 설정할 수 있습니다.

출처

2014-05-19 09:31:21 Dex

박스 섀도우에 영향을 미치는 글꼴 가중치

답변

관련 문제