Ukuran font di CSS -% atau em?

112

Saat menyetel ukuran font di CSS, haruskah saya menggunakan nilai persen ( %) atau em? Bisakah Anda menjelaskan keuntungannya?

css fonts font-size

— Tikar
sumber

1

Menurut saya di tahun 2016 tidak ada perbedaan antara em dan%. Jika saya memasukkan 1.2 em, semua browser modern mengira saya telah menggunakan 120% dan misalnya jika saya menggunakan 0.7 em, semua browser modern berpikir saya telah menggunakan 70% ... Ini yang saya alami dalam CSS

— Mahdi Jazini

79

Ada artikel yang sangat bagus tentang tipografi web di A List Apart .

Kesimpulan mereka:

Mengubah ukuran teks dan tinggi baris dalam ems, dengan persentase yang ditentukan di badan (dan peringatan opsional untuk Safari 2), terbukti memberikan teks yang akurat dan dapat diubah ukurannya di semua browser yang umum digunakan saat ini. Ini adalah teknik yang dapat Anda masukkan ke dalam tas perlengkapan Anda dan digunakan sebagai praktik terbaik untuk mengukur teks dalam CSS yang memuaskan baik desainer maupun pembaca.

— Glenn Slaven
sumber

29

Sebenarnya line-heightslebih baik ditulis tanpa unit sama sekali. Hal ini diizinkan oleh spesifikasi, dan sepenuhnya menghindari kebiasaan browser yang benar-benar menjengkelkan dalam hal emketinggian baris berbasis

— Már Örlygsson

16

Saya ingin menyadarkan orang bahwa artikel ini berasal dari tahun 2007. Sejak saat itu peramban modern menjadi lebih umum, dan peramban modern biasanya memperbesar alih-alih memperbesar ukuran font sebagai default. Karena itu, 'px' menjadi lebih umum dan menurut saya pendekatan yang lebih baik. Tentu saja itu bisa diperdebatkan tetapi saya pribadi mengalami masalah dalam proyek karena bersarangnya mereka.

— Mohag519

5

@ Mohag519 bersarang dari em adalah jebakan berbahaya. :)

— Vishnudev K

@ Mohag519 bukankah px akan memberi Anda sesuatu yang jauh lebih kecil daripada yang dimaksudkan dengan perangkat seluler yang memiliki kerapatan piksel tinggi? Saya rasa kami tidak ingin situs kami persis seperti desktop tetapi sangat kecil di seluler;)

— johnb003

@ johnb003 Perangkat seluler semacam itu memiliki rasio piksel perangkat lebih besar dari 1. Misalnya iPhone 4 memiliki lebar layar fisik 640px, tetapi muncul sebagai 320 piksel "CSS" (DPR = 2). Jadi situs web tidak tampak lebih kecil!

— Benjamin

14

Dari http://archivist.incutio.com/viewlist/css-discuss/1408

%: Beberapa browser tidak menangani persen untuk ukuran font tetapi menafsirkan 150% sebagai 150px. (Beberapa versi NN4, misalnya.) IE juga memiliki masalah dengan persen pada elemen bersarang. Tampaknya IE menggunakan persen relatif terhadap viewport alih-alih relatif terhadap elemen induk. Namun masalah lain (meskipun benar menurut spesifikasi W3C), di Moz / Ns6, Anda tidak dapat menggunakan persen relatif terhadap elemen tanpa tinggi / lebar yang ditentukan.

em: Kadang-kadang browser menggunakan ukuran referensi yang salah, tetapi dari unit relatif itu yang paling sedikit bermasalah. Anda mungkin menemukannya kadang-kadang ditafsirkan sebagai px.

pt: Sangat berbeda antar resolusi, dan sebaiknya tidak digunakan untuk tampilan. Ini cukup aman untuk penggunaan cetak.

px: Satu-satunya unit absolut yang dapat diandalkan di layar. Ini mungkin salah diartikan dalam cetakan, karena satu titik biasanya terdiri dari beberapa piksel, dan dengan demikian semuanya menjadi sangat kecil.

— Galwegian
sumber

Tentang hal pt. Saya memiliki argumen yang bagus tentang /. tentang itu (dan hilang). Saya memiliki sudut pandang yang sama dengan Anda, senang mengetahui seseorang berbagi pov itu :)

— Vincent McNabb

12

Apakah Anda benar-benar mengatakan bahwa beberapa pengguna Netscape Navigator 4 mungkin tidak dapat melihat halaman saya dengan benar jika saya akan menggunakan persentase untuk ukuran font?

— pemula

4

Pembahasan yang dikutip dari tahun 2002. Apakah ini masih relevan? Apakah ada browser yang aktif digunakan dengan em atau% bug?

— Beni Cherniavsky-Paskin

1

Mengutip bug berusia 20 tahun di browser bukanlah jawaban yang berguna.

— d512

7

Keduanya menyesuaikan ukuran font sesuai dengan aslinya. 1.5em sama dengan 150%. Satu-satunya keuntungan tampaknya adalah keterbacaan, pilih mana yang paling Anda sukai.

— Liam
sumber

Bisakah seseorang menjelaskan kepada saya mengapa ini ditolak? Ini persis bagaimana saya memahami perbedaan antara em & persentase. Tidak ada keuntungan saat ini menggunakan salah satu dari yang lain. Yang penting adalah Anda menggunakan ukuran yang relatif terhadap ukuran font dasar.

— Lee Theobald

1

Terima kasih Lee, saya baru saja menguji ini di IE6, IE7, Firefox 3, Safari 3, Opera 9.5, dan Google Chrome, semuanya di Windows dan semuanya tampak sama bagi saya! <p style = "font-size: 0.6em;"> ini adalah tes </p> <p style = "font-size: 60%;"> ini adalah tes </p>

— Liam

7

Perbedaan nyata terlihat jelas saat Anda menggunakannya bukan untuk ukuran font. Menyetel paddingdari 1emtidak sama dengan 100%. emselalu relatif terhadap ukuran font. Tapi %mungkin relatif terhadap ukuran font, lebar, tinggi dan mungkin beberapa hal lain yang tidak saya ketahui.

— Björn Tantau
sumber

5

Mengingat bahwa (hampir?) Semua browser sekarang mengubah ukuran halaman secara keseluruhan, bukan hanya teks, masalah sebelumnya dengan pxvs. %vs. emdalam hal mengubah ukuran font yang dapat diakses agak diperdebatkan.

Jadi, jawabannya mungkin tidak masalah. Gunakan apa pun yang cocok untuk Anda.

% bagus karena memungkinkan pengubahan ukuran relatif.

px itu bagus karena cukup mudah untuk mengelola ekspektasi saat menggunakannya.

em dapat berguna bila juga digunakan untuk elemen tata letak karena dapat memungkinkan ukuran proporsional yang terkait dengan ukuran teks.

— DA.
sumber

Jawaban yang menyesatkan, terutama bagi mereka yang tidak tahu banyak tentang CSS. Mengabaikan fakta bahwa CSS mendefinisikan piksel logis, yang merupakan ide buruk berdasarkan keputusan tergesa-gesa yang tidak diragukan lagi untuk mengakomodasi serangan perangkat seluler berkemampuan CSS satu dekade lalu, piksel sepenuhnya bergantung pada browser dan kebijaksanaan pengguna sejauh ukuran font default berjalan. , setidaknya. Selain itu, kami sekarang memiliki rasio aspek layar yang sangat berbeda (dan tidak selalu perangkat dengan layar) dan resolusi mulai dari 240p hingga 2400p. Menggunakan piksel dalam CSS tanpa JavaScript hampir tidak berguna.

— amn

@ amn well, perhatikan bahwa jawaban ini berumur 8 tahun. Itu waktu yang PANJANG dalam waktu Internet. Meskipun demikian, piksel masih bagus jika tidak ideal. Sebagian besar (semua?) Browser mengakomodasi ukuran font piksel secara memadai pada perangkat tertentu. Namun, hari ini, saya biasanya menggunakan rem sebagai satuan pengukuran saya.

— DA.

Mungkin saya melewatkan sesuatu, tetapi apa manfaatnya jika ada yang memiliki panjang piksel? Mengapa mereka "baik" atau "ideal"? Versus em, misalnya. Selain itu, saya pikir jawaban tentang SO harus diupayakan agar tidak lekang oleh waktu - lagipula ini adalah basis pengetahuan. Wikipedia pemrograman :) Karena Wikipedia diperbarui untuk mencerminkan fakta, begitu juga jawaban SO, menurut pendapat saya.

— amn

@ amn Saya tidak mengatakan mereka ideal atau memiliki manfaat besar yang nyata. Saya baru saja menjawab pertanyaan OP. Mengenai upaya untuk menjadi abadi, jika Anda dapat memprediksi masa depan web 8 tahun dari sekarang, lebih banyak kekuatan untuk Anda! Tetapi saya tidak punya waktu untuk terus-menerus memperbarui jawaban saya di sini selama satu dekade. Mudah-mudahan orang cukup tahu untuk melihat stempel waktu pada jawaban dan mempertimbangkannya.

— DA.

0

Mengenai perbedaan antara unit css %dan em.

Sejauh yang saya mengerti (setidaknya secara teoritis / konseptual, tapi mungkin tidak seberapa dua unit ini mungkin dilaksanakan dalam browser) dua unit ini setara, yaitu jika Anda kalikan Anda emnilai dengan 100dan kemudian menggantinya emdengan %yang seharusnya hal yang sama?

Jika sebenarnya ada perbedaan nyata antara em dan%, dapatkah seseorang menjelaskannya (atau memberikan tautan ke penjelasan)?

(Saya ingin menambahkan komentar saya ini di tempatnya, yaitu menjorok tepat di bawah jawaban oleh "Liam, answered Sep 25 '08 at 11:21"karena saya juga ingin tahu mengapa jawabannya diturunkan suara, tetapi saya tidak tahu bagaimana meletakkan komentar saya di sana dan oleh karena itu harus menulis balasan "utas global" ini)

— pengguna743436
sumber

-1

Seperti yang disebutkan Galwegian, px adalah yang paling andal untuk tipografi web, karena semua hal lain yang Anda lakukan di halaman tersebut sebagian besar ditata dengan mengacu pada monitor komputer. Masalah dengan ukuran absolut adalah bahwa beberapa browser (IE) tidak akan menskalakan elemen nilai piksel pada halaman web, jadi ketika Anda mencoba memperbesar / memperkecil, semuanya menyesuaikan kecuali untuk elemen tersebut.

Saya tidak tahu apakah IE8 menangani ini dengan benar, tetapi semua vendor browser lain menangani piksel dengan baik dan masih merupakan kasus minoritas di mana pengguna perlu memperbesar / memperkecil teks (kotak teks ini pada SO mungkin menjadi pengecualian). Jika Anda ingin benar-benar kotor, Anda selalu dapat menambahkan fungsi javascript untuk memperbesar ukuran teks dan menawarkan tombol "kecil" / "lebih besar" kepada pengguna.

— Christian P.
sumber

1

IE7 menskalakan nilai piksel dengan baik, jika Anda menggunakan zoom. IE6 tidak memiliki zoom, hanya ukuran teks. Zoom menjadi persyaratan karena desainer yang menggunakan skala piksel tetap daripada membiarkan halaman menyesuaikan dengan perubahan ukuran teks.

— Mike Dimmick

Ini masih menjadi masalah dengan IE6, tetapi, sekali lagi, SEMUANYA masih menjadi masalah dengan IE6. Sementara saya menghindari px di masa lalu karena itu, konsep zoom halaman web secara keseluruhan (vs. hanya teks) telah menjadi standar dan saya menemukan diri saya menggunakan px lebih sering.

— DA.

-1

Perpustakaan Antarmuka Pengguna Yahoo ( http://developer.yahoo.com/yui/ ) memiliki sekumpulan kelas dasar css yang digunakan untuk "mengatur ulang" pengaturan khusus browser sehingga dasar untuk menampilkan situs sama untuk semua (didukung) browser.

Dengan YUI, seseorang seharusnya menggunakan persentase.

— kosoant
sumber

Saya telah menggunakan pengaturan ulang YUI, tetapi kemudian menyadari bahwa pengaturan ukuran teks browser TIDAK BEKERJA! Tidak ada gunanya menggunakan% jika Anda memiliki pengaturan px pada badan karena itu merusak pengaturan ukuran teks.

— Jason