Sangat mudah: Font tidak perlu mencocokkan resolusi, mereka harus mencocokkan kerapatan piksel .
Kerapatan piksel diukur sebagai piksel per inci ( PPI ), atau piksel per sentimeter. Ada juga satuan ukuran yang disebut kepadatan piksel independen ( DP ) . Didefinisikan 1dp
dengan ukuran satu piksel pada 160 PPI
layar.
Sekarang kembali ke font, coba lakukan tes ini: letakkan laptop Anda untuk berjalan di 720p. Lihatlah ukuran font. Sekarang colokkan ke monitor 1080p 42 "dari desktop Anda. Jika monitor Anda menampilkan informasi yang tepat tentang ukurannya, maka font tersebut seharusnya memiliki ukuran yang PERSIS sama dengan di layar 720p. Bayangkan betapa anehnya jika teks di komputer Anda laptop memiliki ukuran yang berbeda dari teks pada monitor desktop Anda. Dengan mengatakan, resolusi yang lebih besar harus memberikan lebih detail pada font, layar yang lebih besar harus memberikan lebih banyak konten untuk ditampilkan.
Fakta yang sama dapat diamati pada editor teks. Sebuah 72pt
font harus terlihat di layar sama seperti ketika dicetak di atas kertas.
Semua ini berarti Anda mungkin harus menginginkan ukuran yang sama di semua ukuran tampilan (dengan beberapa pengecualian). Jika Anda ingin mendasarkan diri di suatu tempat, situs web biasanya menggunakan 12pt
font, penggunaan MS Windows 11pt
dan 12pt
font.
Bagan ini (juga termasuk di bagian bawah jawaban) memberi tahu kami 12pt
di CSS kira-kira sama dengan 16px
di CSS (Seolah-olah ini tidak cukup membingungkan, px dalam CSS sama dengan dp di tempat lain), jadi katakanlah Anda Anda akan membuat font Anda 16dp
di LibGDX.
Di gim Anda, gunakan FreeTypeFontGenerator
untuk menghasilkan font secara dinamis, dengan cara ini Anda dapat mempertimbangkan kepadatan layar saat membuatnya:
BitmapFont createFont(FreeTypeFontGenerator ftfg, float dp)
{
return ftfg.generateFont((int)(dp * Gdx.graphics.getDensity()));
}
//On Init
BitmapFont buttonFont = createFont(arial, 16); //16dp == 12pt
Ini bekerja karena Gdx.graphics.getDensity()
sama dengan YourScreenDensity/160
demikian, adalah "faktor skala" untuk membawa barang-barang ke ukuran mereka pada layar 160ppi.
Tentang pengecualian yang saya sebutkan sebelumnya: Anda mungkin ingin ukuran font disesuaikan dengan ukuran layar untuk logo, promo, dll. Namun perlu diingat bahwa Anda akan lebih baik membuatnya di editor grafis seperti Photoshop atau Gimp bagaimanapun juga.
Pengecualian lainnya adalah teks pada layar kecil. Layar ponsel 4,5 "atau lebih kecil, dapat dikenakan. Biasanya Anda tidak akan punya waktu untuk membuat konten gulir, atau Anda tidak akan mampu membayar begitu banyak konten di layar itu. Anda dapat mencoba untuk memperkecil ukuran font 1dp
, seperti pembaca mungkin akan memiliki ponsel yang sangat dekat dengan wajah mereka, mereka mungkin tidak akan memiliki masalah membaca. Perlu diingat Anda dapat mengganggu pemain membaca teks kecil yang tidak dapat dibaca.
TL; DR:
- Ukuran fisik kira-kira tidak akan berubah secara langsung dengan ukuran layar atau resolusi, tetapi dengan kombinasi keduanya (
screenSize/resolution
PPI terkenal)
- Pikirkan pt dan dp . Lupakan piksel layar sampai Anda harus menggambar hasil akhir.
- Buat font Anda saat runtime dengan ukuran yang wajar.
- Mengonversi dp ke piksel layar:
pixels = dp * Gdx.graphics.getDensity();
- Jika Anda menggunakan mesin yang tidak memberi Anda konverter ke dp seperti LibGDX
Gdx.graphics.getDensity()
, Anda dapat mencoba :, densityFactor = Screen.getPixelsPerInch() / 160.0f
lalupixels = dp * densityFactor
EDIT:
2014, 25 Juni di Google IO, Matias mengumumkan pedoman gaya baru untuk Android, termasuk font Roboto baru dan pedoman tipografi. Ambil tabel ini sebagai panduan:
EDIT2:
Termasuk bagan ukuran font CSS jika tautan membusuk: