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

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:

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

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

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.

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).

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

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.

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.

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.

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.

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:

• CSS 1 spec (1996)
• CSS 2.1 spec (2011)
• CSS Fonts Level 3 spec (2013)
• CSS Fonts Level 3 draft editor (2017)