글꼴이 포토샵과 웹 사이트에서 다르게 보입니다.

Question

간단한 질문 :이 두 글꼴은 포토샵과 웹 사이트에서 왜 다르게 보입니까?

이 그림에서 -이 첫 번째 텍스트는 HTML 코드에서 가져온 것이고 두 번째는 포토샵에서 가져온 이미지입니다. 같은 글꼴, 같은 크기 - 30.하지만이 첫 번째보다 두 번째 "굵게"보인다. 왜? 포토샵 (두 번째 그림)에서와 똑같은 서체를 갖고 싶습니다. 여기

CSS 코드 :

@font-face { 
font-family: "SegoeWP"; 
src: url("fonts/play/SegoeWP.eot"); 
src: url("fonts/play/SegoeWP.eot?#iefix") 
     format("embedded-opentype"), 
    url("fonts/play/SegoeWP.woff") format("woff"), 
    url("fonts/play/SegoeWP.ttf") format("truetype"), 
    url("fonts/play/SegoeWP.svg#PlayRegular") format("svg"); 
font-weight: lighter; 
} 

#strona { 
    width: 1120px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#Section1 
{ 
     font-family: "SegoeWP", Tahoma, Arial, sans-serif; 
     font-size: 30px; 
} 



header, footer, article, section, hgroup, nav, figure { 
    display: block; 
} 


body { 
    font-family: "SegoeWP", Tahoma, Arial, sans-serif; 
    background-image:url('background.jpg'); 
    background-repeat: no-repeat; 
    background-position: top center; 
    color: #ffffff; 

} 

와 HTML 코드입니다.

<section id="Section1"> { mywebsite.NET } </section> 
    <img src="mojeportfolio.png" /> 

아이디어가 있으십니까? 인사말!

더는 내가 폴더에 SegoeWP 글꼴의 3 가지 유형이 있음을 발견했다. "SegoeWP", "SegoeWP-Light", "SegoeWP-Semibold". "SegoeWP"는 너무 굵은 글자처럼 보입니다.하지만이 "SegoeWP-Light"는 완벽하고 두 번 클릭하면 Photoshop에서와 똑같아 보입니다. 내 웹 사이트에서 어떻게 사용할 수 있습니까? 이 부분 -> url ("fonts/play/SegoeWP-Light. *")을 변경하면 웹 사이트에서 아무 것도 변경되지 않습니다. 뭐가 잘못 되었 니? 포토샵

Answer 1

는 ... 웹 브라우저와 다르게 많은 글꼴 때로는 문제가 될 수있는 올바른 위치. 글꼴의 무게를 감소하는 방법에 대한 메모를 위해 당신은 여기에서 찾을 수 있습니다

http://www.w3schools.com/css/tryit.asp?filename=trycss_font-weight

Answer 2

당신이에 CSS를 추가하고 있는지 확인하여 글꼴 거의 항상 브라우저에서 서로 다른 모양, 부드럽게 커널과 다른 사람과 같은 기능을 사용하기 때문에 포토샵 처리

Answer 3

같은 결과가 font-smoothing: antialiased를 사용하고 포토샵 이미지를 일치하도록 글꼴 크기를 줄여보십시오 얻을 수 있습니다.

가장 큰 차이점은 Adobe Photoshop은 대부분의 브라우저와 달리 서브 픽셀 글꼴 다듬기를 수행하지 않기 때문입니다. 예를 들어 이미지를 확대하면이 가장자리가 쉽게 볼 수 있습니다 (가장자리의 색상 이동 참조). Windows는 인식 된 글꼴 가중치가 심각하게 변경 될 수 있으므로이 문제를 더욱 악화시키는 서브 픽셀 글꼴 렌더링의 추가 선명한 형태를 사용하는 역사를 가지고 있습니다.

Smashing Magazine은 글꼴 렌더링에 훌륭한 article을 가지고 있습니다.