ขนาดตัวอักษรใน CSS พร้อมเครื่องหมายทับ


133

เครื่องหมายทับหมายถึงอะไรที่นี่:

font: 100%/120%;

4
font-sizeไม่ยอมรับเครื่องหมายทับ คุณสมบัติที่ถูกต้องคือfont.
BoltClock

แล้วพวกนี้ล่ะ พื้นหลัง: "rgba (0, 0, 0, 0) ไม่มีการเลื่อนซ้ำ 0% 0% / auto padding-box border-box"
jerinho.com

คำตอบ:


196

สิ่งนี้ตั้งค่าคุณสมบัติสองอย่างและเทียบเท่ากับ:

font-size: 100%;
line-height: 120%;

หากต้องการอ้างอิงเอกสารอย่างเป็นทางการ :

ไวยากรณ์ของคุณสมบัตินี้ขึ้นอยู่กับสัญกรณ์ชวเลขการพิมพ์แบบดั้งเดิมเพื่อตั้งค่าคุณสมบัติต่างๆที่เกี่ยวข้องกับฟอนต์

ดังที่ David M กล่าวไว้ในความคิดเห็นมันสะท้อนให้เห็นถึงประเพณีการเรียงพิมพ์ในการระบุขนาดแบบอักษรเป็น " x  pt on y  pt" เพื่อแสดงขนาดสัญลักษณ์ตามความสูงของเส้น

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

font: 100%/120% serif;

53
เป็นการจำลองไวยากรณ์การเรียงพิมพ์แบบเก่าโดยที่คุณตั้งค่าแบบอักษรไว้เช่น "10pt on 12pt" หรือ "10pt / 12pt"
David M

1
ฉันใช้มันค่อนข้างน้อย นักออกแบบที่ฉันทำงานด้วยมักอ้างถึงการปรับขนาดเช่น "14 มากกว่า 22" วันหนึ่งฉันใส่มันโดยบังเอิญและรู้สึกประหลาดใจ / พอใจเมื่อมันใช้งานได้
Dylan Lukes

1
กุ๊กกิ๊ก: รูปแบบนี้ไม่ต้องระบุตระกูลฟอนต์ด้วยหรือ? เบราว์เซอร์ของฉันไม่สนใจคุณสมบัตินี้: font: 12px / 16px; แต่ยอมรับสิ่งนี้: font: 12px / 16px sans-serif; พฤติกรรมนี้มีการบันทึกไว้ที่นี่ด้วย
kumarharsh

@Harsh ใช่ครอบครัว (พร้อมกับขนาด) จะต้องน้อยที่สุดสำหรับfontสถานที่ให้บริการจดชวเลขที่คุณสามารถดูในความหมายอย่างเป็นทางการ
Konrad Rudolph

ขอขอบคุณสำหรับการชี้แจง. บางทีคุณอาจอัปเดตคำตอบ (หรือคำถาม) ได้เนื่องจากทำให้เข้าใจผิดเล็กน้อยเนื่องจากผู้อ่านทั่วไปสามารถสันนิษฐานได้ว่าการประกาศ SIZE / LINE_HEIGHT เท่านั้นที่จะใช้ได้
kumarharsh

15

Konrad มีคุณสมบัตินี้ แต่มีคุณสมบัติชวเลข CSSมากมายเช่นนี้ที่คุณสามารถใช้เพื่อย่อสไตล์ชีตของคุณ บางคนดูคลุมเครือเล็กน้อยหากคุณไม่ทราบ


shorthands ส่วนใหญ่กล่าวถึงคุณสมบัติของสไตล์ที่เกี่ยวข้องแม้ว่า (เช่นborder-*) เดวิดได้ให้คำอธิบายที่ดีในความคิดเห็นสำหรับคำตอบของฉัน สำหรับ shorthands เป็นความลับ: เป็นเรื่องจริง แต่มีประโยชน์มากและค่อนข้างง่ายในการเรียนรู้
Konrad Rudolph
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.