Czcionka wygląda inaczej w Photoshopie i na stronie internetowej

Question

Proste pytanie: dlaczego te 2 czcionki wyglądają inaczej w Photoshopie i na stronie internetowej.

Na tym zdjęciu - pierwszy tekst pochodzi z kodu html, drugi to obraz z photoshopa. Ta sama czcionka, ten sam rozmiar - 30. Ale ten pierwszy wygląda bardziej "odważnie" niż drugi. Czemu? Chcę mieć identyczną czcionkę jak w Photoshopie (drugie zdjęcie).

Oto kod 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; 

} 

i kod html.

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

jakieś pomysły? Pozdrowienia!

WIĘCEJ

znalazłem, że mam 3 rodzaje czcionki SegoeWP w folderze. "SegoeWP", "SegoeWP-Light", "SegoeWP-Semibold". "SegoeWP" wygląda nieco zbyt "odważnie", ale ta "SegoeWP-Light" jest idealna i wygląda identycznie jak w Photoshopie, kiedy ją dwukrotnie podwajałem. Jak mogę go użyć na mojej stronie? Kiedy zmieniam tę część -> url ("fonts/play/SegoeWP-Light. *"), Nic się nie zmienia na stronie. Co jest nie tak?

Answer 1

Photoshop obsługuje czcionki wiele inaczej niż w przeglądarce internetowej ... bo photoshop używane funkcje, takie jak wygładzanie, jądra i innych czcionka prawie zawsze wyglądają inaczej w przeglądarce

Answer 2

Upewnij się, że dodanie do css Właściwa lokalizacja czasami może być problem. W celu uzyskania pełnych informacji dotyczącej sposobu, aby zmniejszyć ciężar czcionki można go znaleźć tutaj:

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

Answer 3

aby uzyskać ten sam wynik spróbuj font-smoothing: antialiased oraz zmniejszenie rozmiaru czcionki tak, aby odpowiadał Photoshop obraz.

Największa różnica polega na tym, że Adobe Photoshop nie wykonuje funkcji wygładzania czcionek subpikselowych w przeciwieństwie do większości przeglądarek. Na przykładowym obrazie jest to dobrze widoczne po powiększeniu (zobacz przesunięcia kolorów wokół krawędzi). W systemie Windows używana jest wyjątkowo wyraźna forma renderowania czcionek subpikselowych, co pogarsza problem, ponieważ postrzegana waga czcionki może się znacznie zmienić.

Smashing Magazine ma doskonałą article renderowania czcionek.