CSS: ขนาดตัวอักษร 100% - 100% ของอะไร

มีหลาย บทความและคำถามเกี่ยวกับร้อยละขนาดอื่น ๆ เทียบกับขนาดตัวอักษร อย่างไรก็ตามฉันไม่สามารถทราบได้ว่าการอ้างอิงเปอร์เซ็นต์ควรเป็นอะไร ฉันเข้าใจว่านี่คือ 'ขนาดเท่ากันในทุกเบราว์เซอร์' ฉันยังอ่านสิ่งนี้เช่น:

เปอร์เซ็นต์ (%): หน่วยเปอร์เซ็นต์นั้นเหมือนกับหน่วย“ em” มากพอสำหรับความแตกต่างพื้นฐาน ก่อนอื่นขนาดฟอนต์ปัจจุบันเท่ากับ 100% (เช่น 12pt = 100%) ในขณะที่ใช้หน่วยเปอร์เซ็นต์ข้อความของคุณยังคงสามารถปรับขนาดได้อย่างสมบูรณ์สำหรับอุปกรณ์มือถือและการเข้าถึง

ที่มา: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

แต่ถ้าคุณพูดว่า "ie 12 pt = 100%" หมายความว่าคุณต้องกำหนดfont-size: 12ptก่อน นั่นเป็นวิธีการทำงานหรือไม่ คุณกำหนดขนาดในการวัดแบบสัมบูรณ์ก่อนแล้วจึงอ้างอิงสิ่งนี้ว่า '100%' ไม่สมเหตุสมผลนักตัวอย่างหลายคนบอกว่ามันมีประโยชน์ที่จะนำ:

body {
  font-size: 100%;
}

ดังนั้นเมื่อทำสิ่งนี้ขนาดตัวอักษรจะสัมพันธ์กับอะไร? ฉันสังเกตเห็นว่าขนาดที่ฉันเห็นบนหน้าจอของฉันแตกต่างกันสำหรับแบบอักษรทุกตัว ยกตัวอย่างเช่น Arial ดูใหญ่กว่า Times New Roman นอกจากนี้ถ้าฉันจะทำเช่นนี้ขนาดร่างกาย = 100% นั่นหมายความว่ามันจะเหมือนกันในทุกเบราว์เซอร์หรือไม่? หรือเฉพาะในกรณีที่ฉันกำหนดค่าสัมบูรณ์ก่อน

อัปเดต SAT กรกฎาคม 23

ฉันไปถึงที่นั่น แต่ได้โปรดทนกับฉัน

ดังนั้นค่า% เกี่ยวข้องกับขนาดตัวอักษรเบราว์เซอร์เริ่มต้นถ้าฉันเข้าใจอย่างถูกต้อง นั่นเป็นสิ่งที่ดี แต่ให้คำถามอีกหลายข้อกับฉันอีกครั้ง:

1. ขนาดมาตรฐานนี้จะเหมือนกันทุกเวอร์ชันของเบราว์เซอร์หรือไม่หรือจะแตกต่างกันไปตามรุ่นหรือไม่
2. ผม ! พบ (ดูภาพด้านล่าง) การตั้งค่าสำหรับ Google Chrome (ไม่เคยดูที่นี่มาก่อน!) และฉันเห็นการตั้งค่ามาตรฐาน "serif", "sans-serif" และ "monospace" มาตรฐาน แต่ฉันจะตีความสิ่งนี้สำหรับแบบอักษรอื่น ๆ ได้อย่างไร ถ้าฉันบอกว่าfont: 100% Georgia;เบราว์เซอร์จะใช้ขนาดใด มันจะค้นหาขนาดมาตรฐานสำหรับ serif หรือให้ตัวอักษร "Georgia" มีขนาดมาตรฐานสำหรับเบราว์เซอร์
3. บนเว็บไซต์หลายฉันอ่าน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สิ่งที่ชอบ แต่จากสิ่งที่ฉันกำลังเรียนรู้ตอนนี้ฉันเชื่อว่าคุณควรเลือกระหว่างข้อความที่ปรับขนาดได้ (โดยใช้% หรือ em เช่นที่พวกเขาแนะนำในใบเสนอราคานี้) หรือมี 'ขนาดตัวอักษรที่ถูกต้องสม่ำเสมอในเบราว์เซอร์' (โดยใช้ px หรือ pt เป็นฐาน) ถูกต้องหรือไม่

การตั้งค่าของ Google:

นี่คือสิ่งที่ฉันคิดว่าสิ่งต่าง ๆอาจมีลักษณะเป็นถ้าคุณไม่ได้กำหนดขนาดในค่าสัมบูรณ์

เบราว์เซอร์เริ่มต้นซึ่งมีลักษณะคล้าย 16pt สำหรับ Firefox คุณสามารถตรวจสอบโดยไปที่ตัวเลือก Firefox คลิกแท็บเนื้อหาและตรวจสอบขนาดตัวอักษร คุณสามารถทำเช่นเดียวกันสำหรับเบราว์เซอร์อื่นเช่นกัน

ฉันชอบที่จะควบคุมขนาดตัวอักษรเริ่มต้นของเว็บไซต์ของฉันดังนั้นในไฟล์ CSS ที่รวมอยู่ในทุกหน้าฉันจะตั้งค่าเริ่มต้น BODY ให้เป็นดังนี้:

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

ตอนนี้ขนาดตัวอักษรของแท็ก HTML ของฉันทั้งหมดจะได้รับขนาดตัวอักษร 14px

บอกว่าฉันต้องการให้ div ทั้งหมดมีขนาดตัวอักษรใหญ่กว่าร่างกาย 10% ฉันก็ทำได้

div {
    font-size: 110%
}

ตอนนี้เบราว์เซอร์ใด ๆ ที่ดูหน้าของฉันจะทำให้ div ทั้งหมดใหญ่ขึ้นโดยอัตโนมัติ 10% ซึ่งควรเป็น 15.4px

หากฉันต้องการให้ขนาดตัวอักษรของ div ทั้งหมดเล็กลง 10% ฉันจะทำ:

div {
    font-size: 90%
}

สิ่งนี้จะทำให้ div ทั้งหมดมีขนาดตัวอักษร 12.6px

นอกจากนี้คุณควรทราบด้วยว่าเนื่องจากขนาดตัวอักษรได้รับการสืบทอดมาดังนั้นแต่ละ div ที่ซ้อนกันจะลดขนาดตัวอักษรลง 10% ดังนั้น:

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

div ภายในจะมีขนาดตัวอักษรเท่ากับ 11.34px (90% ของ 12.6px) ซึ่งอาจไม่ได้มีเจตนา

สิ่งนี้สามารถช่วยในการอธิบาย: http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage

ความเข้าใจของฉันคือว่าเมื่อตัวอักษรมีการตั้งค่าดังต่อไปนี้

body {
  font-size: 100%;
}

เบราว์เซอร์จะแสดงแบบอักษรตามการตั้งค่าผู้ใช้สำหรับเบราว์เซอร์นั้น

ข้อมูลจำเพาะบอกว่ามีการแสดงผล%

สัมพันธ์กับขนาดตัวอักษรขององค์ประกอบหลัก

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

ในกรณีนี้ฉันใช้เพื่อหมายถึงสิ่งที่ตั้งค่าเบราว์เซอร์

ร้อยละของมูลค่าของfont-sizeทรัพย์สินเทียบกับขนาดตัวอักษรองค์ประกอบหลักของ CSS 2.1 บอกว่าสิ่งนี้คลุมเครือและสับสน (หมายถึง“ ขนาดอักษรที่สืบทอดมา”) แต่ข้อความ CSS3 บอกว่าชัดเจนมาก

พาเรนต์ของbodyองค์ประกอบคือองค์ประกอบรูตเช่นhtmlองค์ประกอบ นอกจากการตั้งค่าในสไตล์ชีตขนาดตัวอักษรขององค์ประกอบรากขึ้นอยู่กับการนำไปใช้งาน โดยทั่วไปจะขึ้นอยู่กับการตั้งค่าของผู้ใช้

การตั้งค่าfont-size: 100%นั้นไม่มีประโยชน์ในหลาย ๆ กรณีเนื่องจากอิลิเมนต์สืบทอดขนาดฟอนต์ของพาเรนต์ (นำไปสู่ผลลัพธ์เดียวกัน) หากไม่มีสไตล์ชีทตั้งค่าขนาดฟอนต์ของตัวเอง อย่างไรก็ตามจะมีประโยชน์ในการแทนที่การตั้งค่าในสไตล์ชีตอื่น ๆ (รวมถึงสไตล์ชีตเริ่มต้นของเบราว์เซอร์)

ตัวอย่างเช่นinputองค์ประกอบมักจะมีการตั้งค่าในสไตล์ชีตของเบราว์เซอร์ทำให้ขนาดตัวอักษรเริ่มต้นมีขนาดเล็กกว่าข้อความคัดลอก หากคุณต้องการทำให้ขนาดตัวอักษรเหมือนกันคุณสามารถตั้งค่าได้

อินพุต {font-size: 100%}

สำหรับbodyองค์ประกอบนั้นมีการfont-size: 100%ใช้การตั้งค่าซ้ำซ้อนอย่างมีเหตุผลบ่อยครั้งเนื่องจากเชื่อว่าจะช่วยป้องกันข้อผิดพลาดบางอย่างของเบราว์เซอร์ (ในเบราว์เซอร์ที่อาจสูญเสียความสำคัญไปแล้ว)

มันเกี่ยวข้องกับขนาดตัวอักษรเบราว์เซอร์เริ่มต้นเว้นแต่คุณจะแทนที่ด้วยค่าใน pt หรือ px

ขออภัยถ้าฉันไปงานปาร์ตี้สาย แต่ในการแก้ไขของคุณคุณพูดเกี่ยวกับfont: 100% Georgiaคำตอบอื่น ๆ ที่ยังไม่ได้ตอบ

มีความแตกต่างระหว่างการเป็นและfont: 100% Georgia font-size:100%; font-family:'Georgia'ถ้านั่นเป็นวิธีการจดชวเลขทั้งหมดส่วนของแบบอักษรจะไม่มีความหมาย แต่มันยังตั้งค่าคุณสมบัติจำนวนมากเป็นค่าเริ่มต้น: ความสูงของเส้นจะกลายเป็นnormal(หรือประมาณ 1.2), เหมือนกันสำหรับสไตล์ (ไม่ใช่ตัวเอียง) และน้ำหนัก (ไม่ใช่ตัวหนา)

นั่นคือทั้งหมดที่ คำตอบอื่น ๆ ที่กล่าวถึงแล้วทุกอย่างอื่นมีการพูดถึง

ตามที่คุณแสดงให้เห็นอย่างชัดเจนfont-size: 100%;จะไม่แสดงผลเหมือนกันในเบราว์เซอร์ทั้งหมด อย่างไรก็ตามคุณจะตั้งค่าแบบอักษรในไฟล์ CSS ของคุณดังนั้นสิ่งนี้จะเหมือนกัน (หรือทางเลือก) ในเบราว์เซอร์ทั้งหมด

ฉันเชื่อว่าfont-size: 100%;จะมีประโยชน์มากเมื่อรวมเข้ากับemการออกแบบที่ใช้ ในฐานะที่เป็นบทความนี้แสดงให้เห็นว่านี้จะสร้างเว็บไซต์ที่มีความยืดหยุ่นมาก

สิ่งนี้มีประโยชน์เมื่อใด เมื่อเว็บไซต์ของคุณต้องการปรับให้เข้ากับความต้องการของผู้เข้าชม ยกตัวอย่างคนแก่ที่ใส่ขนาดตัวอักษรเริ่มต้นที่ 24 px หรือใครบางคนที่มีหน้าจอขนาดเล็กที่มีความละเอียดสูงที่เพิ่มขนาดตัวอักษรเริ่มต้นของเขาเพราะมิฉะนั้นต้องเหล่ ไซต์ส่วนใหญ่จะแตก แต่ไซต์ที่ใช้อีเอ็มสามารถรับมือกับสถานการณ์เหล่านี้ได้

สัมพันธ์กับขนาดเริ่มต้นที่กำหนดให้กับแบบอักษรนั้น

หากมีคนเปิดหน้าเว็บของคุณบนเว็บเบราว์เซอร์จะมีแบบอักษรเริ่มต้นและขนาดแบบอักษรที่ใช้

ตามความเข้าใจของฉันมันช่วยให้เนื้อหาของคุณปรับค่าต่าง ๆ ของตระกูลแบบอักษรและขนาดแบบอักษรทำให้เนื้อหาของคุณปรับขนาดได้ ในเรื่องของขนาดตัวอักษรที่สืบทอดเราสามารถแทนที่ได้โดยการกำหนดขนาดตัวอักษรสำหรับองค์ประกอบ

ตามข้อมูลจำเพาะทั้งหมดกลับไปที่ปี 1996ค่าเปอร์เซ็นต์font-sizeอ้างอิงถึงขนาดตัวอักษร(คำนวณ)องค์ประกอบหลัก

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

มันง่ายมาก

จะเกิดอะไรขึ้นถ้าการdivประกาศขนาดแบบอักษรที่เกี่ยวข้องเช่นems หรือยิ่งแย่ลงไปอีกเปอร์เซ็นต์ ดู“ คำนวณ”ด้านบน หน่วยสัมพัทธ์แปลงเป็น

คำถามเดียวที่ยังคงอยู่คือสิ่งที่เกิดขึ้นเมื่อคุณใช้ค่าเปอร์เซ็นต์ในองค์ประกอบรูตซึ่งไม่มีพาเรนต์:

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

ในกรณีดังกล่าวให้ดู“ ซ้ำ”ของคำถามนี้ TLDR: เปอร์เซ็นต์ขององค์ประกอบรูทอ้างอิงถึงขนาดตัวอักษรเริ่มต้นของเบราว์เซอร์ซึ่งอาจแตกต่างกันไปตามผู้ใช้

อ้างอิง:

• CSS 1 spec (1996)
• CSS 2.1 spec (2011)
• CSS แบบอักษรระดับ 3 spec (2013)
• CSS ฉบับร่างแก้ไขระดับ 3 (2017)