Bagaimana mengatasi pengaturan ukuran font dengan menghitung piksel?

Saya memiliki gambar situs web yang diusulkan.

Bagaimana cara mengetahui nilai ukuran font px untuk mengatur teks dengan menghitung piksel?

Misalnya saya memiliki ukuran font: 14px, (dalam Arial) tetapi menghitung dari atas "L" dan ujung ekor "p" Saya menghitung 10 piksel pada "L", dengan tambahan 3 pada ekor "p". Yang jelas tidak memberi saya 14.

Apakah ada cara untuk melatih nilai ukuran font dengan menghitung piksel secara andal?

Masalah umum cukup banyak dijawab oleh Apa ukuran font yang diterjemahkan secara tepat? - Yaitu ukuran tidak benar-benar berarti sesuatu yang sangat spesifik.

Tetapi mengingat Anda bekerja dengan font spesifik yang dikenal, Anda memang harus dapat menerjemahkan jumlah piksel pada mockup Anda ke ukuran piksel nominalnya - Anda harus melakukan sedikit eksperimen untuk mengetahui rasio.

Tapi saya sarankan itu jauh lebih mudah untuk melakukan ini dengan perbandingan, yaitu hanya mengubah ukuran pada halaman web Anda sampai cocok dengan maket, overlay screenshot jika perlu untuk memeriksa. Ingatlah bahwa rendering font browser Anda tidak mungkin cocok dengan rendering Photoshop atau rendering browser pada platform lain.

Pada ukuran teks biasa, sebagian besar font memiliki 1 hingga 4 piksel 'penyangga' dari atas ke bawah.

Anda biasanya dapat langsung menerapkan ukuran piksel yang Anda gunakan saat mengompilasi ke CSS Anda. TKI, jika Photoshop / Illustrator mengatakan 14px pada 130% terdepan, CSS Anda akan mengatakan

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

Saya tidak berpikir menghitung piksel dapat diandalkan. Alasannya, ketika saya menggilir font, katakan di Photoshop, mereka selalu ditampilkan dalam ukuran acak. Saya tahu PS bukan web, tetapi ini menunjukkan bahwa 14px dalam satu font bisa jauh lebih besar daripada font lain.

Saya telah berhasil mengambil tangkapan layar ke Photoshop dan melapisinya. Tentu saja Anda perlu memastikan tangkapan layar Anda 100% dan Anda memiliki font yang sama.

Namun cara terbaik dan tercepat untuk melihat ukuran font apa halaman web gunakan adalah untuk melihat sumber halaman web. Jika tidak disebutkan style="font-size: 14px;"di suatu tempat di tag, itu ada di stylesheet (lebih dari kemungkinan). Cari tautan di dekat bagian atas kode halaman yang berakhiran .css dan kunjungi tautan itu. Cari font-sizedan font-familydeklarasi. Itu akan memberi tahu Anda apa font yang digunakan dan berapa ukuran untuk berbagai elemen halaman web.