I caratteri sembrano diversi su Photoshop e sul sito web

Question

Domanda semplice: perché questi 2 tipi di carattere sono diversi in Photoshop e nel sito Web.

A questa immagine - questo primo testo proviene dal codice html, il secondo è un'immagine da photoshop. Lo stesso carattere, la stessa dimensione - 30. Ma questo sembra prima più "audace" che secondo. Perché? Voglio avere un font identico come è in Photoshop (seconda foto).

Qui codice 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; 

} 

E codice html.

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

qualche idea? Saluti!

PIÙ

ho trovato, che ho 3 tipi di carattere SegoeWP nella cartella. "SegoeWP", "SegoeWP-Light", "SegoeWP-Semibold". "SegoeWP" sembra un po 'troppo "audace", ma questo "SegoeWP-Light" è perfetto e sembra identico a Photoshop quando lo faccio doppio clic. Come posso usarlo sul mio sito web? Quando cambio questa parte -> url ("font/play/SegoeWP-Light. *"), Nulla cambia nel sito web. Che c'è?

Answer 1

gestisce Photoshop font molto diverso rispetto a un browser web ... perché photoshop funzioni usato come lisciatura, kernel e altri il carattere sarà quasi sempre un aspetto diverso in un browser

Answer 2

Assicurarsi che si sta aggiungendo il css per la posizione giusta a volte potrebbe essere il problema. Per le note complete su come ridurre il peso di un tipo di carattere che si può trovare qui:

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

Answer 3

Per ottenere lo stesso risultato provare a utilizzare font-smoothing: antialiased, e riducendo la dimensione del carattere in modo che corrisponda l'immagine di Photoshop.

La più grande differenza è dovuta al fatto che Adobe Photoshop non eseguirà il livellamento dei caratteri subpixel a differenza della maggior parte dei browser. Nell'immagine di esempio questo è facilmente visibile se si esegue lo zoom in avanti (vedere i cambiamenti di colore attorno ai bordi). Windows ha una cronologia di utilizzo di una forma più nitida di rendering dei caratteri subpixel, che esacerba il problema in quanto il peso del carattere percepito può variare gravemente.

Smashing Magazine ha un eccellente article per il rendering dei caratteri.