Come elaborare l'impostazione della dimensione del carattere contando i pixel?

Ho un'immagine di un sito web proposto.

Come faccio a capire quale valore di dimensione del carattere px per impostare il testo contando i pixel?

Ad esempio, ho una dimensione del carattere: 14px, (in Arial) ma contando dalla cima di una "L" e dalla coda di una "p" conto 10 pixel sulla "L", con un ulteriore 3 sulla coda di la "p". Il che ovviamente non mi dà 14.

Esiste un modo per allenare il valore della dimensione del carattere contando i pixel in modo affidabile?

Il problema generale è praticamente risolto da Che cosa traduce esattamente la dimensione del carattere? - cioè le dimensioni non significano davvero qualcosa di molto specifico.

Ma dato che stai lavorando con un font specifico noto, dovresti davvero essere in grado di tradurre un conteggio di pixel sul tuo mockup alla sua dimensione nominale di pixel - dovresti fare un po 'di sperimentazione per calcolare il rapporto.

Ma suggerirei che è molto più semplice farlo al confronto, cioè basta cambiare le dimensioni sulla tua pagina web fino a quando non corrisponde al modello, sovrapponendo uno screenshot se necessario per verificare. Tieni presente tuttavia che è improbabile che il rendering dei caratteri del tuo browser corrisponda esattamente al rendering di Photoshop o al rendering del browser su un'altra piattaforma.

A dimensioni di testo tipiche, la maggior parte dei caratteri ha da 1 a 4 pixel di "buffer" dall'alto verso il basso.

Di solito è possibile applicare direttamente la dimensione in pixel utilizzata durante la composizione al CSS. IOW, se Photoshop / Illustrator dice 14px con un vantaggio del 130%, direbbe il tuo CSS

font-size:14px
line-height:1.3em

Non credo che contare i pixel sia affidabile. Il motivo è che, quando scorro i caratteri, diciamo in Photoshop, vengono sempre visualizzati a dimensioni casuali. So che PS non è il web, ma questo dimostra che 14px in un font può essere molto più grande di quanto non lo sia per un altro font.

Ho avuto successo prendendo lo screenshot in Photoshop e allineandolo. Ovviamente devi assicurarti che il tuo screenshot sia al 100% e che tu abbia lo stesso carattere.

Il modo migliore e più veloce, tuttavia, per vedere quale dimensione del carattere utilizza una pagina Web è visualizzare l'origine della pagina Web. Se non è menzionato da style="font-size: 14px;"qualche parte nel tag, è nel foglio di stile (più che probabile). Cerca il collegamento nella parte superiore del codice della pagina che termina in .css e visita quel collegamento. Cerca le dichiarazioni font-sizee font-family. Questo ti dirà quale tipo di carattere viene utilizzato e quale è la dimensione per vari elementi della pagina web.