ขนาดตัวอักษรใน CSS -% หรือ em?

112

เมื่อตั้งค่าขนาดของฟอนต์ใน CSS ฉันควรใช้ค่าเปอร์เซ็นต์ ( %) หรือem? คุณสามารถอธิบายข้อดีได้หรือไม่?

css fonts font-size

1

ในความคิดของฉันในปี 2559 ไม่มีความแตกต่างระหว่าง em และ% ถ้าฉันป้อน 1.2 em เบราว์เซอร์สมัยใหม่ทั้งหมดคิดว่าฉันใช้ไป 120% แล้วและตัวอย่างเช่นถ้าฉันใช้ 0.7 em เบราว์เซอร์สมัยใหม่ทั้งหมดคิดว่าฉันใช้ไป 70% ... นี่คือสิ่งที่ฉันได้สัมผัสใน CSS

— Mahdi Jazini

79

มีบทความที่ดีมากในการพิมพ์บนเว็บเป็นรายการนอกเหนือ

ข้อสรุปของพวกเขา:

การปรับขนาดข้อความและความสูงของบรรทัดใน ems พร้อมเปอร์เซ็นต์ที่ระบุบนเนื้อความ (และข้อแม้เสริมสำหรับ Safari 2) แสดงให้เห็นว่าให้ข้อความที่ถูกต้องและปรับขนาดได้ในทุกเบราว์เซอร์ที่ใช้กันทั่วไปในปัจจุบัน นี่เป็นเทคนิคที่คุณสามารถใส่ในกระเป๋าชุดอุปกรณ์และใช้เป็นแนวทางปฏิบัติที่ดีที่สุดในการปรับขนาดข้อความใน CSS ที่ถูกใจทั้งนักออกแบบและผู้อ่าน

— Glenn Slaven
แหล่งที่มา

29

จริงๆแล้วline-heightsจะเขียนได้ดีกว่าโดยไม่มีหน่วยใด ๆ เลย สิ่งนี้ได้รับอนุญาตตามข้อกำหนดนี้และหลีกเลี่ยงemความ

— แปลกประหลาดของ

16

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

— Mohag519

5

@ Mohag519 การทำรังของ em เป็นกับดักที่อันตราย :)

— Vishnudev K

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

— johnb003

@ อุปกรณ์มือถือ johnb003 ดังกล่าวมีอัตราการใช้อุปกรณ์พิกเซล1มีขนาดใหญ่กว่า ตัวอย่างเช่น iPhone 4 มีความกว้างหน้าจอจริง 640px แต่ปรากฏเป็น 320 "CSS" พิกเซล (DPR = 2) ดังนั้นเว็บไซต์จึงไม่เล็กลง!

— Benjamin

14

จากhttp://archivist.incutio.com/viewlist/css-discuss/1408

%: เบราว์เซอร์บางตัวไม่รองรับเปอร์เซ็นต์สำหรับขนาดฟอนต์ แต่ตีความ 150% เป็น 150px (ตัวอย่างเช่น NN4 บางเวอร์ชัน) IE ยังมีปัญหาเกี่ยวกับเปอร์เซ็นต์ขององค์ประกอบที่ซ้อนกัน ดูเหมือนว่า IE ใช้เปอร์เซ็นต์เทียบกับวิวพอร์ตแทนที่จะสัมพันธ์กับองค์ประกอบหลัก ปัญหาอื่น (แม้ว่าจะถูกต้องตามข้อกำหนด W3C) ใน Moz / Ns6 คุณไม่สามารถใช้เปอร์เซ็นต์ที่สัมพันธ์กับองค์ประกอบที่ไม่มีความสูง / ความกว้างที่ระบุได้

em: บางครั้งเบราว์เซอร์ใช้ขนาดอ้างอิงที่ไม่ถูกต้อง แต่หน่วยสัมพัทธ์เป็นขนาดที่มีปัญหาน้อยที่สุด คุณอาจพบว่ามันถูกตีความเป็น px ในบางครั้ง

pt: ความละเอียดแตกต่างกันมากและไม่ควรใช้สำหรับการแสดงผล ค่อนข้างปลอดภัยสำหรับการใช้งานพิมพ์

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

— Galwegian
แหล่งที่มา

เกี่ยวกับ pt thing. ฉันมีข้อโต้แย้งที่ดีเกี่ยวกับ /. เกี่ยวกับเรื่องนั้น (และหลงทาง) ฉันมีมุมมองเดียวกับคุณดีที่ได้รู้จักใครบางคนแบ่งปัน pov นั้น :)

— Vincent McNabb

12

คุณกำลังบอกว่าผู้ใช้ Netscape Navigator 4 บางคนอาจไม่สามารถดูเพจของฉันได้อย่างถูกต้องหากฉันจะใช้เปอร์เซ็นต์สำหรับขนาดฟอนต์?

— มือใหม่

4

การอภิปรายที่อ้างถึงมาจากปี 2002 สิ่งนี้ยังเกี่ยวข้องหรือไม่? มีเบราว์เซอร์ใดบ้างที่ใช้งานอยู่กับ em หรือ% bugs หรือไม่?

— Beni Cherniavsky-Paskin

1

การอ้างถึงบั๊กอายุ 20 ปีในเบราว์เซอร์ไม่ใช่คำตอบที่มีประโยชน์

— d512

7

ทั้งปรับขนาดตัวอักษรให้สัมพันธ์กับสิ่งที่เป็นอยู่ 1.5em เท่ากับ 150% ข้อได้เปรียบเพียงอย่างเดียวคือความสามารถในการอ่านให้เลือกสิ่งที่คุณพอใจมากที่สุด

— เลียม
แหล่งที่มา

ใครช่วยอธิบายให้ฉันฟังได้ไหมว่าทำไมถึงได้รับการโหวต นี่เป็นวิธีที่ฉันเข้าใจความแตกต่างระหว่าง em & เปอร์เซ็นต์ ปัจจุบันไม่มีข้อได้เปรียบใด ๆ ในการใช้อย่างอื่น สิ่งสำคัญคือคุณใช้ขนาดที่สัมพันธ์กับขนาดตัวอักษรพื้นฐาน

— Lee Theobald

1

ขอบคุณลีฉันเพิ่งทดสอบสิ่งนี้ใน IE6, IE7, Firefox 3, Safari 3, Opera 9.5 และ Google Chrome ทั้งหมดนี้บน Windows และทุกอย่างก็เหมือนกันสำหรับฉัน! <p style = "font-size: 0.6em;"> นี่คือการทดสอบ </p> <p style = "font-size: 60%;"> เป็นการทดสอบ </p>

— Liam

7

ความแตกต่างที่แท้จริงเกิดขึ้นเมื่อคุณไม่ใช้กับขนาดตัวอักษร การตั้งค่าpaddingของไม่ได้เช่นเดียวกับ1em จะสัมพันธ์กับขนาดตัวอักษรเสมอ แต่อาจสัมพันธ์กับขนาดตัวอักษรความกว้างความสูงและอาจเป็นเรื่องอื่น ๆ ที่ฉันไม่รู้100%em%

— Björn Tantau
แหล่งที่มา

5

เนื่องจากเบราว์เซอร์ทั้งหมด (เกือบ?) ตอนนี้ปรับขนาดหน้าโดยรวมแล้วแทนที่จะเป็นแค่ข้อความปัญหาก่อนหน้านี้เกี่ยวกับpxเทียบ%กับems ในแง่ของการปรับขนาดแบบอักษรที่สามารถเข้าถึงได้นั้นค่อนข้างจะสงสัย

ดังนั้นคำตอบก็คือมันอาจจะไม่สำคัญ ใช้อะไรก็ได้ที่เหมาะกับคุณ

% เป็นสิ่งที่ดีเพราะสามารถปรับขนาดสัมพัทธ์ได้

px เป็นสิ่งที่ดีเพราะมันค่อนข้างง่ายในการจัดการความคาดหวังเมื่อใช้มัน

em จะมีประโยชน์เมื่อใช้กับองค์ประกอบเค้าโครงเนื่องจากสามารถกำหนดขนาดตามสัดส่วนที่เกี่ยวข้องกับขนาดข้อความได้

— DA
แหล่งที่มา

คำตอบที่ทำให้เข้าใจผิดโดยเฉพาะอย่างยิ่งสำหรับผู้ที่ไม่รู้เกี่ยวกับ CSS มากนักในตอนแรก เมื่อไม่คำนึงถึงความจริงที่ว่า CSS กำหนดพิกเซลเชิงตรรกะซึ่งเป็นความคิดที่แย่มากจากการตัดสินใจที่เร่งรีบอย่างไม่ต้องสงสัยเพื่อรองรับการโจมตีของอุปกรณ์มือถือที่รองรับ CSS เมื่อทศวรรษที่แล้วพิกเซลขึ้นอยู่กับเบราว์เซอร์ทั้งหมดและผู้ใช้จะพิจารณาถึงขนาดตัวอักษรเริ่มต้น , อย่างน้อย. นอกจากนั้นตอนนี้เรายังมีอัตราส่วนภาพหน้าจอที่แตกต่างกันอย่างกว้างขวาง(ไม่ใช่อุปกรณ์ที่มีหน้าจอเสมอไป ) และความละเอียดตั้งแต่ 240p ถึง 2400p การใช้พิกเซลใน CSS โดยไม่มี JavaScript นั้นแทบไม่มีประโยชน์

— AMN

@ โปรดทราบว่าคำตอบนี้มีอายุ 8 ปี เป็นเวลาอินเทอร์เน็ตที่ยาวนาน ที่กล่าวว่าพิกเซลยังคงใช้ได้หากไม่เหมาะ เบราว์เซอร์ (ทั้งหมด?) ส่วนใหญ่รองรับการปรับขนาดฟอนต์พิกเซลอย่างเพียงพอบนอุปกรณ์นั้น ๆ แต่วันนี้ฉันมักจะใช้ rem เป็นหน่วยวัด

— DA.

บางทีฉันอาจจะพลาดบางอย่างไป แต่จะมีประโยชน์อะไรหากมีความยาวพิกเซล ทำไมพวกเขาถึง "สบายดี" หรือ "ในอุดมคติ"? emตัวอย่างเช่นเมื่อเทียบกับ จากนั้นฉันคิดว่าคำตอบเกี่ยวกับ SO ควรมุ่งมั่นที่จะเป็นอมตะ - มันเป็นฐานความรู้หลังจากทั้งหมด Wikipedia ของการเขียนโปรแกรม :) เนื่องจาก Wikipedia ได้รับการอัปเดตเพื่อสะท้อนข้อเท็จจริงดังนั้นควรตอบในความเห็นที่ต่ำต้อยของฉัน

— AMN

@ ฉันไม่ได้บอกว่าพวกเขาเหมาะหรือมีผลประโยชน์หลักที่แท้จริง ฉันเพิ่งตอบคำถาม OPs สำหรับความมุ่งมั่นที่จะอยู่เหนือกาลเวลาหากคุณสามารถทำนายอนาคตของเว็บ 8 ปีจากนี้คุณจะมีพลังมากขึ้น! แต่ฉันไม่มีเวลาอัปเดตคำตอบที่มีมูลค่าตลอดทศวรรษที่นี่ หวังว่าผู้คนจะรู้มากพอที่จะดูการประทับเวลาของคำตอบและนำไปพิจารณา

— DA.

0

เกี่ยวกับความแตกต่างระหว่างหน่วย css %และem.

เท่าที่ฉันเข้าใจ (อย่างน้อยก็ในทางทฤษฎี / แนวความคิด แต่อาจไม่ใช่วิธีที่สองหน่วยนี้จะถูกนำไปใช้ในเบราว์เซอร์) สองหน่วยนี้เทียบเท่ากันกล่าวคือถ้าคุณคูณemค่าของคุณด้วย100แล้วแทนที่emด้วย%มันควรจะเป็นสิ่งเดียวกันหรือไม่

หากมีความแตกต่างที่แท้จริงระหว่าง em และ% มีใครช่วยอธิบายได้บ้าง (หรือให้ลิงค์ไปยังคำอธิบาย)

(ฉันต้องการเพิ่มความคิดเห็นนี้ของฉันที่มันจะอยู่นั่นคือเยื้องใต้คำตอบโดย"Liam, answered Sep 25 '08 at 11:21"เนื่องจากฉันอยากรู้ว่าทำไมคำตอบของเขาจึงถูกลดลง แต่ฉันไม่สามารถเข้าใจได้ว่าจะแสดงความคิดเห็นอย่างไรจึงต้องเขียน "กระทู้นี้ทั่วโลก" ตอบกลับ)

— user743436
แหล่งที่มา

-1

ตามที่ชาวกัลเวย์กล่าวถึง px เป็นสิ่งที่น่าเชื่อถือที่สุดสำหรับการพิมพ์บนเว็บเนื่องจากทุกอย่างที่คุณทำบนหน้าเว็บส่วนใหญ่จะอ้างอิงถึงจอภาพคอมพิวเตอร์ ปัญหาเกี่ยวกับขนาดที่แน่นอนคือบางเบราว์เซอร์ (IE) จะไม่ปรับขนาดองค์ประกอบค่าพิกเซลบนหน้าเว็บดังนั้นเมื่อคุณพยายามย่อ / ขยายทุกอย่างจะปรับยกเว้นองค์ประกอบเหล่านั้น

ฉันไม่รู้ว่า IE8 จัดการสิ่งนี้อย่างถูกต้องหรือไม่ แต่ผู้จำหน่ายเบราว์เซอร์รายอื่นทั้งหมดจัดการพิกเซลได้ดีและยังคงเป็นกรณีส่วนน้อยที่ผู้ใช้ต้องการขยาย / ลดขนาดข้อความ (กล่องข้อความนี้ใน SO อาจเป็นข้อยกเว้น) หากคุณต้องการสกปรกจริงๆคุณสามารถเพิ่มฟังก์ชันจาวาสคริปต์เพื่อทำให้ขนาดข้อความของคุณใหญ่ขึ้นและเสนอปุ่ม "เล็ก" / "ใหญ่กว่า" ให้กับผู้ใช้

— คริสเตียนพี
แหล่งที่มา

1

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

— Mike Dimmick

ยังคงเป็นปัญหากับ IE6 แต่ทุกอย่างยังคงเป็นปัญหากับ IE6 ในขณะที่ฉันหลีกเลี่ยง px ในอดีตด้วยเหตุนี้แนวคิดของการซูมหน้าเว็บโดยรวม (เทียบกับ jsut ข้อความ) ได้กลายเป็นมาตรฐานและฉันพบว่าตัวเองใช้ px บ่อยกว่ามาก

— DA.

-1

ไลบรารีส่วนติดต่อผู้ใช้ Yahoo ( http://developer.yahoo.com/yui/ ) มีชุดคลาส css พื้นฐานที่ดีซึ่งใช้ในการ "รีเซ็ต" การตั้งค่าเฉพาะเบราว์เซอร์เพื่อให้พื้นฐานสำหรับการแสดงไซต์นั้นเหมือนกันสำหรับทุกคน (รองรับ) เบราว์เซอร์

ด้วย YUI เราควรใช้เปอร์เซ็นต์

— kosoant
แหล่งที่มา

ฉันใช้การรีเซ็ต YUI แต่แล้วก็รู้ว่าการตั้งค่าขนาดตัวอักษรของเบราว์เซอร์ไม่ทำงาน! ไม่เห็นจุดใด ๆ ในการใช้% หากคุณตั้งค่า px ไว้บนเนื้อความเนื่องจากมันทำลายการตั้งค่าขนาดข้อความ

— Jason