글꼴 크기가 Photoshop에서보다 HTML에서 더 크다

내 <nav> 요소는 원래 Photoshop에서 디자인 한 것보다 Chrome에서 볼 때 훨씬 큰 글꼴 크기로 각 목록 요소를 표시합니다. 크롬에서 내 글꼴은 Photoshop에서보다 너비가 큰 23px으로 표시됩니다. 내 해상도는 72dpi이고 그 밖의 모든 것들은 잘 보이는 것 같습니다.글꼴 크기가 Photoshop에서보다 HTML에서 더 크다

여기에 내 jsFiddle입니다. this처럼 보입니다.

출처

2013-05-10 Mitch Pash

는 무엇이 다른 브라우저에서 생겼 간격 CSS 문자를 동일? Chrome 설정을 확인 했습니까? 페이지의 맨 아래로 고급을 클릭하면 '글꼴 크기'를 설정할 수있는'웹 콘텐츠'섹션이 있어야합니다. –

모든 브라우저에서 동일하게 보입니다. –

폭이 23px보다 큰지, 높이가 23px입니까? [jsFiddle] (http://jsfiddle.net/)을 사용하여 동일한 글꼴을 사용하여 문제를 표시하고 게시물에 추가 할 수 있습니까? 또한 PSD의 일부분을 화면 클리핑 (코스에서 '100 %'줌 레벨로)하여 추가하면 어떻게 보이는지를 보여줍니다. –

표시되는 동작은 링크 요소에 text-transform: uppercase;을 사용하고 있기 때문입니다. 이렇게하면 각 문자가 대문자로 변환됩니다. 22px 문자의 대문자 버전은 font-size22px 집합보다 크게 렌더링됩니다.

대신 font-variant: small-caps;를 사용하고 HTML에 대문자 문자를 제거 할 수 :

<ul> 
    <li><a href="#">home</a></li> 
    ..

그리고 당신의 CSS이 설정 : 트릭을 할해야

a { font-variant: small-caps; ..

출처

2013-05-11 03:20:22

고마워요! 그게 도움이 됐어! –

걱정하지 않아도 다음 답변을 수락 할 수 있습니다. :) –

차이가 너비 밖에없는 경우 Photoshop의 문자 간격을 CSS로 직접 변환 할 수 없으므로 문자 간격을 선언하면 문제가 될 수 있습니다. 이것이 용의자 인 경우 Photoshop에 표시된 값을 1000으로 나누고 결과를 CSS에서 em 척도로 지정하여 문자 간격을 올바르게 결정할 수 있습니다.

예 : 포토샵 문자 간격은 (20) 1000으로 나눈 등호 0.02em

출처

2014-01-10 17:21:43 davidcondrey

글꼴 크기가 Photoshop에서보다 HTML에서 더 크다

답변

관련 문제