2012-08-12 3 views
0

내 페이지에서 여러 개의 버튼으로 webfont (poly)를 사용하고 있습니다. 파이어 폭스에서는 모든 것이 올바르게 보이지만 크롬에서는 첫 번째 버튼의 글꼴이 동일한 CSS3 코드를 사용함에도 불구하고 다른 글꼴보다 굵게 보입니다 (오타가 누락 된 경우 제외). Mysteriously Bold 글꼴 CSS3

http://ashgavs.cloudant.com/site/_design/AshGavsCouch/betcha/index.html

페이지를 먹으 렴, 페이스 북으로 로그인 대 로그인 보거나 가입합니다. 폰트 가중치에 영향을 미치는 텍스트의 길이가 아닙니다. 이미 테스트했습니다. 그 중 하나 문제가되지 않을 수 있으므로,

 #login{ 
     position: absolute; 
     top: 137px; 
     left: 19px; 
     padding-top: 10px; 
     padding-bottom: 10px; 
     border-top: 1px solid #aff797; 
     background: #369942; 
     background: -webkit-gradient(linear, left top, left bottom, from(#27ca3d), to(#369942)); 
     background: -webkit-linear-gradient(top, #27ca3d, #369942); 
     background: -moz-linear-gradient(top, #27ca3d, #369942); 
     background: -ms-linear-gradient(top, #27ca3d, #369942); 
     background: -o-linear-gradient(top, #27ca3d, #369942); 
     -webkit-border-radius: 11px; 
     -moz-border-radius: 11px; 
     border-radius: 5px; 
     -webkit-box-shadow: rgba(0,0,0,.7) 0 1px 0; 
     -moz-box-shadow: rgba(0,0,0,.7) 0 1px 0; 
     box-shadow: rgba(0,0,0,.7) 0 1px 0; 
     text-shadow: 0 1px 0 #91d99a; 
     color: #0e5817; 
     font-size: 24px; 
     font-family: 'Poly', serif; 
     text-decoration: none; 
     vertical-align: center; 
     width: 229px; 
    } 

    #loginFB{ 
     position: absolute; 
     top: 196px; 
     left: 19px; 
     padding-top: 10px; 
     padding-bottom: 10px; 
     border-top: 1px solid #65a9d7; 
     background: #3e779d; 
     background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d)); 
     background: -webkit-linear-gradient(top, #65a9d7, #3e779d); 
     background: -moz-linear-gradient(top, #65a9d7, #3e779d); 
     background: -ms-linear-gradient(top, #65a9d7, #3e779d); 
     background: -o-linear-gradient(top, #65a9d7, #3e779d); 
     -webkit-border-radius: 11px; 
     -moz-border-radius: 11px; 
     border-radius: 5px; 
     -webkit-box-shadow: rgba(0,0,0,.7) 0 1px 0; 
     -moz-box-shadow: rgba(0,0,0,.7) 0 1px 0; 
     box-shadow: rgba(0,0,0,.7) 0 1px 0; 
     text-shadow: 0 1px 0 #7ca9c7; 
     color: #0e3458; 
     font-size: 24px; 
     font-family: 'Poly', serif; 
     text-decoration: none; 
     vertical-align: center; 
     width: 229px; 
     } 

두 버튼이 같은 div의 속성을 상속 :

여기에 제 1 및 제 2 버튼에 대한 CSS입니다. 감사. - 애슐리

+0

그들은 내게 꽤 똑같아 보입니다. http://i.imgur.com/S39rQ.png – Blender

+0

두 버튼의 글꼴이 똑같아 보입니다. 스크린 샷 : http://imgur.com/VoZI1 –

+0

여기에 있습니다. Firefox와 Chrome에서 모두 동일하게 보입니다. 배경색과의 대비 때문에 두 번째 단추가 조금 더 굵은 것처럼 보일 수 있습니까? –

답변

0

특정 브라우저에서 사용 가능합니다. 그럼에도 불구하고 매우 좋은 일 (요즘 요구 사항)은 CSS 정의 전에 CSS 재설정을 추가하는 것입니다. 그냥 구글 "CSS 재설정". 많은 결과가 나타납니다. 기본적으로 브라우저 특정 서식을 제거하므로 CSS가 페이지에서 유일한 효과적인 서식 지정입니다. 브라우저에서 예기치 않은 변경 사항이나 추가 사항이 없습니다. 종종이 작업을 수행하면 설명하는 문제를 해결할 수 있습니다. 브라우저의 특성을 조사하고 싶지만 시간을 절약하기 위해 먼저 재설정을 시도하십시오.

+0

다른 방법으로 복사 해보았지만 제대로 작동하지 않는 것 같습니다. – user1118684

관련 문제