CSS: Ukuran font 100% - 100% dari apa?


138

Ada banyak artikel dan pertanyaan tentang ukuran font vs ukuran lainnya . Namun, saya tidak dapat menemukan APA referensi dari nilai persen yang seharusnya. Saya mengerti ini adalah 'ukuran yang sama di semua browser'. Saya juga membaca ini, misalnya:

Persen (%): Unit persen mirip dengan unit "em", kecuali untuk beberapa perbedaan mendasar. Pertama dan terpenting, ukuran font saat ini sama dengan 100% (yaitu 12pt = 100%). Saat menggunakan unit persen, teks Anda tetap dapat diskalakan sepenuhnya untuk perangkat seluler dan aksesibilitas.

Sumber: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Tetapi jika Anda mengatakan "yaitu 12 pt = 100%", maka itu berarti Anda harus terlebih dahulu mendefinisikan font-size: 12pt. Apakah itu cara kerjanya? Anda pertama-tama menentukan ukuran dalam ukuran absolut, dan kemudian menyebutnya sebagai '100%'? Tidak masuk akal, karena banyak sampel mengatakan itu berguna untuk dimasukkan:

body {
  font-size: 100%;
}

Jadi dengan melakukan ini, APA ukuran font relatif? Saya perhatikan bahwa ukuran yang saya lihat di layar saya berbeda untuk setiap font. Arial terlihat jauh lebih besar daripada Times New Roman, misalnya. Juga, jika saya hanya melakukan ini, ukuran tubuh = 100%, apakah itu berarti bahwa itu akan sama pada semua browser? Atau hanya jika saya pertama mendefinisikan nilai absolut?

PEMBARUAN, SAT JULI 23

Saya sampai di sana, tapi tolong bersabar.

Jadi, nilai% berkaitan dengan ukuran font browser default, jika saya mengerti dengan benar. Yah, itu bagus tetapi memberi saya beberapa pertanyaan lagi:

  1. Apakah ukuran standar ini selalu sama untuk setiap versi browser, atau apakah mereka berbeda di antara versi?
  2. Saya! menemukan (lihat gambar di bawah) pengaturan untuk Google Chrome (tidak pernah melihat ini sebelumnya!), dan saya melihat pengaturan standar "serif", "sans-serif" dan "monospace". Tetapi bagaimana cara menafsirkan ini untuk font lain? Katakanlah saya mendefinisikanfont: 100% Georgia; , ukuran apa yang akan diambil browser? Apakah akan mencari ukuran standar untuk serif, atau memiliki font "Georgia" ukuran standar untuk browser
  3. Di beberapa situs web saya membaca hal-hal seperti Sizing text and line-height in ems, with a percentage specified on the body [..], was shown to provide **accurate, resizable text across all browsers** in common use today. Tetapi dari apa yang saya pelajari sekarang, saya percaya bahwa Anda harus benar-benar memilih antara teks yang dapat diubah ukurannya (menggunakan% atau em, seperti apa yang mereka rekomendasikan dalam kutipan ini), atau memiliki 'ukuran font yang akurat dan konsisten di seluruh browser' (dengan menggunakan px atau pt sebagai basis). Apakah ini benar?

Pengaturan Google:

Google Chrome Settinsg

Ini adalah bagaimana saya pikir hal - hal bisa terlihat jika Anda tidak menentukan ukuran dalam nilai absolut.

masukkan deskripsi gambar di sini

Jawaban:


89

Default browser yang kira-kira seperti 16pt untuk Firefox, Anda dapat memeriksa dengan masuk ke opsi Firefox, mengklik tab Konten, dan memeriksa ukuran font. Anda dapat melakukan hal yang sama untuk browser lain juga.

Saya pribadi suka mengontrol ukuran font default situs web saya, jadi dalam file CSS yang disertakan di setiap halaman saya akan menetapkan BODY default, seperti:

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px
}

Sekarang ukuran font semua tag HTML saya akan mewarisi ukuran font 14px.

Katakan bahwa saya ingin semua div memiliki ukuran font 10% lebih besar dari body, saya cukup lakukan:

div {
    font-size: 110%
}

Sekarang setiap browser yang melihat halaman saya akan secara otomatis membuat semua div 10% lebih besar dari pada body, yang seharusnya sekitar 15,4px.

Jika saya ingin ukuran font semua div 10% lebih kecil, saya akan:

div {
    font-size: 90%
}

Ini akan membuat semua div memiliki ukuran font 12.6px.

Anda juga harus tahu bahwa karena ukuran font diwarisi, bahwa setiap div bersarang akan mengurangi ukuran font sebesar 10%, jadi:

<div>Outer DIV.
    <div>Inner DIV</div>
</div>

Bagian dalam div akan memiliki ukuran font 11.34px (90% dari 12.6px), yang mungkin tidak dimaksudkan.

Ini dapat membantu dalam penjelasan: http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage


Terima kasih! Ini membuatnya jauh lebih jelas. Tapi saya masih bertanya-tanya tentang artikel yang mengklaim 'akurasi' atau 'konsistensi' saat menggunakan%. Tampaknya ini SALAH SALAH jika saya menafsirkan jawaban Anda dengan benar. Saya telah memperbarui pertanyaan dengan beberapa pertanyaan tambahan ...
user852091

3
Jawaban atas pertanyaan yang diajukan (100% dari apa?) Tidak benar, ada beberapa ketidakakuratan (tidak semua elemen mewarisi ukuran font), dan ada catatan dan pendapat tentang masalah yang tidak ditanyakan.
Jukka K. Korpela

Kepadatan piksel benar-benar harus diperhitungkan. Sesuatu yang 100% dari halaman pada ponsel 4K akan berpikir ia memiliki ribuan piksel resolusi horizontal dan vertikal. Untuk konten Flash dengan NO_SCALE, mis. Aplikasi web, dll., Kontrolnya akan kecil, terutama menu, misalnya pada LG G3. Ini juga berlaku untuk beberapa konten HTML yang berukuran piksel. Salah satu cara atau lainnya, kepadatan piksel (piksel per inci), harus diperhitungkan, baik melalui penggunaan unit yang sepenuhnya relatif atau pengubahan ukuran dinamis berbasis JavaScript.
Triynko

1
Dikonfirmasi bahwa browser modern masih menggunakan 12pt / 16px @ 96ppi sebagai default. Pada catatan terkait, Anda dapat menggunakan "rem" alih-alih "em" untuk selalu skala elemen tertentu relatif terhadap root (elemen html, atau default browser). Dapat bermanfaat dengan hierarki kompleks elemen yang relatif berukuran.
Beejor

Lebih baik untuk mengatur Anda font-sizeunit relatif menggunakan seperti em, rem, atau %. Menggunakan pxakan menimpa ukuran font default browser! Banyak pengguna menentukan ukuran font khusus untuk mempermudah membaca teks.
mfluehr

15

Pemahaman saya adalah ketika font diatur sebagai berikut

body {
  font-size: 100%;
}

browser akan merender font sesuai pengaturan pengguna untuk browser itu.

Spesifikasi mengatakan bahwa% dirender

relatif terhadap ukuran font elemen induk

http://www.w3.org/TR/CSS1/#font-size

Dalam hal ini, saya menganggap itu artinya browser diatur.


sebenarnya induk dari bodyadalah html. jadi body { font-size: 100%; }akan 100% dari htmlukuran font, bukan browser default. Namun, biasanya ini satu hal yang sama, sehingga Anda benar secara efektif. Namun terkadang Anda akan melihat html { font-size: ??? }aturan.
chharvey

9

Persentase dalam nilai font-sizeproperti relatif terhadap ukuran font elemen induk . CSS 2.1 mengatakan ini secara tidak jelas dan membingungkan (merujuk pada "ukuran font yang diwarisi"), tetapi CSS3 Text mengatakan dengan sangat jelas.

Induk bodyelemen adalah elemen root, yaituhtml elemen. Kecuali diatur dalam lembar gaya, ukuran font elemen root tergantung pada implementasi. Ini biasanya tergantung pada pengaturan pengguna.

Pengaturan font-size: 100% tidak ada gunanya dalam banyak kasus, karena sebuah elemen mewarisi ukuran font induknya (mengarah ke hasil yang sama), jika tidak ada style sheet yang mengatur ukuran fontnya sendiri. Namun, dapat berguna untuk mengesampingkan pengaturan pada style sheet lain (termasuk style sheet default browser).

Misalnya, sebuah input elemen biasanya memiliki pengaturan dalam style sheet browser, membuat ukuran font default lebih kecil dari pada teks yang disalin. Jika Anda ingin membuat ukuran font yang sama, Anda dapat mengatur

input {ukuran font: 100%}

Untuk bodyelemen, pengaturan redundan yang logis font-size: 100%digunakan cukup sering, karena diyakini dapat membantu melawan beberapa bug browser (di browser yang mungkin telah kehilangan signifikansinya sekarang).


3
Satu contoh di mana font-size:100%bisa melayani tujuan adalah dalam mode Quirks, di mana ukuran font tidak diwarisi ke dalam tabel. Dengan gaya ini, tabel memang mendapatkan ukuran font induk. Tentu saja, tidak ada yang waras lagi yang menggunakan mode Quirks ...
Mr Lister

4

Ini relatif terhadap ukuran font browser default kecuali Anda menimpanya dengan nilai dalam pt atau px.


Jadi ini akan berbeda jika setiap browser?
user852091

2
Ya, setiap browser memiliki pengaturan default sendiri, termasuk ukuran font. Itu sebabnya Anda biasanya harus menggunakan reset css.
RocketR

1
Ini salah. Ini adalah persentase dari elemen induk. Anda mungkin mengalami persentase ukuran font default karena elemen induk Anda mewarisi ukuran font default.
Zectbumo

@ Zectbumo Benar, tidak terlalu tepat. Tapi pertanyaannya menyebutkan body, bukan elemen bersarang secara sewenang-wenang, jadi jawabannya benar dengan tanda bintang kecil :)
RocketR

: - / kecuali bahwa itu bersarang karena induk dari <body> adalah <html>
Zectbumo

4

Maaf jika saya terlambat ke pesta, tetapi dalam suntingan Anda, Anda membuat komentar tentang font: 100% Georgia, yang jawaban lainnya belum merespons.

Ada perbedaan antara font: 100% Georgiadan font-size:100%; font-family:'Georgia'. Jika hanya itu yang dilakukan oleh metode steno, ukuran font akan menjadi tidak berarti. Tapi itu juga mengatur banyak properti ke nilai default mereka: ketinggian garis menjadi normal(atau sekitar 1,2), juga untuk gaya (non-italic) dan berat (non-tebal).

Itu saja. Jawaban lain sudah menyebutkan semua hal lain yang ada.


3

Saat Anda menunjukkan dengan meyakinkan, font-size: 100%;tidak akan membuat yang sama di semua browser. Namun, Anda akan mengatur wajah font Anda di file CSS Anda, jadi ini akan sama (atau mundur) di semua browser.

Saya percaya font-size: 100%;bisa sangat berguna ketika menggabungkannya dengan emdesain berbasis. Seperti yang ditunjukkan artikel ini , ini akan membuat situs web yang sangat fleksibel.

Kapan ini berguna? Ketika situs Anda perlu beradaptasi dengan keinginan pengunjung. Ambil contoh seorang pria tua yang menempatkan ukuran font default-nya di 24 px. Atau seseorang dengan layar kecil dengan resolusi besar yang meningkatkan ukuran font default-nya karena dia harus menyipit. Sebagian besar situs akan rusak, tetapi situs berbasis em mampu mengatasi situasi ini.


1

Relatif ke ukuran default yang ditentukan untuk font itu.

Jika seseorang membuka halaman Anda di browser web, ada font default dan ukuran font yang digunakannya.


0

Mengenai pemahaman saya, ini membantu konten Anda menyesuaikan dengan nilai font dan ukuran font yang berbeda. Dengan demikian, membuat konten Anda dapat diskalakan. Mengenai masalah ukuran font bawaan, kita selalu dapat mengesampingkan dengan memberikan ukuran font spesifik untuk elemen.


0

Menurut SEMUA SPESIFIK DATING KEMBALI KE 1996 , nilai persentase font-sizemengacu pada ( font ) ukuran elemen induk .

<style>
div {
  font-size: 16px;
}
span {
  font-size: 75%;
}
</style>
<div><span>this font size is 12px!</span></div>

Sangat mudah.

Bagaimana jika divmenyatakan ukuran font relatif, seperti ems, atau lebih buruk lagi, persentase lain ?? Lihat "dihitung" di atas. Unit absolut apa pun yang dikonversi oleh unit relatif.

Satu-satunya pertanyaan yang tersisa adalah apa yang terjadi ketika Anda menggunakan nilai persentase pada elemen root, yang tidak memiliki induk:

html {
  font-size: 62.5%; /* 62.5% of what? */
}

Dalam hal ini, lihat "duplikat" dari pertanyaan ini. TLDR: persentase pada elemen root merujuk ke ukuran font default browser, yang mungkin berbeda per pengguna.

Referensi:

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.