ฉันต้องใส่เครื่องหมายคำพูดรอบ ๆ ชื่อตระกูลแบบอักษรใน CSS หรือไม่?


95

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

font-family: "Arial Narrow", Arial, Helvetica, sans-serif;

สำหรับเรื่องนี้ฉันได้ลองลบเครื่องหมายคำพูดออก"Arial Narrow"และ Safari และ Firefox ไม่มีปัญหาในการแสดงผล

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


ฉันคิดว่าเป็นความคิดที่ดีที่จะพูดถึงตระกูลฟอนต์ทุกตระกูลโดยไม่ต้องใช้ฟอนต์ทั่วไป มันทำให้สิ่งต่างๆสอดคล้องกัน
Micah Henning

คำตอบ:


79

CSS 2.1 สเปคบอกเราว่า:

ชื่อตระกูลแบบอักษรต้องกำหนดให้เป็นสตริงหรือไม่ต้องใส่เครื่องหมายเป็นลำดับของตัวระบุอย่างน้อยหนึ่งตัว ซึ่งหมายความว่าอักขระเครื่องหมายวรรคตอนและตัวเลขส่วนใหญ่ที่จุดเริ่มต้นของแต่ละโทเค็นจะต้องใช้ Escape ในชื่อตระกูลฟอนต์ที่ไม่มีเครื่องหมาย

กล่าวต่อไปว่า:

หากกำหนดลำดับของตัวระบุเป็นชื่อตระกูลฟอนต์ค่าที่คำนวณคือชื่อที่แปลงเป็นสตริงโดยการรวมตัวระบุทั้งหมดในลำดับด้วยช่องว่างเดียว

เพื่อหลีกเลี่ยงข้อผิดพลาดในการหลีกเลี่ยงขอแนะนำให้อ้างชื่อตระกูลแบบอักษรที่มีช่องว่างตัวเลขหรืออักขระเครื่องหมายวรรคตอนอื่นที่ไม่ใช่ขีดกลาง:

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

ชื่อตระกูลแบบอักษรที่เกิดขึ้นจะเหมือนกับค่าคีย์เวิร์ด ('inherit', 'serif', 'sans-serif', 'monospace', 'fantasy' และ 'cursive') ต้องถูกยกมาเพื่อป้องกันความสับสนกับคีย์เวิร์ด ที่มีชื่อเดียวกัน คำหลัก "เริ่มต้น" และ "ค่าเริ่มต้น" สงวนไว้สำหรับการใช้งานในอนาคตและจะต้องถูกยกมาเมื่อใช้เป็นชื่อแบบอักษร

โปรดทราบว่าเครื่องหมายวรรคตอนเช่น / หรือ! ภายในตัวระบุอาจต้องถูกยกมาหรือใช้ Escape


6
initialและdefaultเป็นคำหลักด้วย (สงวนไว้สำหรับใช้ในอนาคต) ดูunquoted ชื่อตระกูลแบบอักษรใน CSS
Mathias Bynens

23

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

อย่างไรก็ตามหากคุณไม่ " อักขระเครื่องหมายวรรคตอนและตัวเลขส่วนใหญ่ที่จุดเริ่มต้นของแต่ละโทเค็นจะต้องใช้ Escape " เพื่อหลีกเลี่ยงข้อผิดพลาดจริงๆแล้ว W3C แนะนำให้อ้างชื่อตระกูลฟอนต์ที่มีช่องว่างตัวเลขเครื่องหมายวรรคตอนหรือค่าคีย์เวิร์ด ('inherit', 'serif' ฯลฯ )

ชื่อตระกูลแบบอักษรทั่วไป ('serif', 'sans-serif', 'เล่นหาง', 'แฟนตาซี' และ 'monospace') ต้องไม่ยกมาเนื่องจากเป็นคำหลักจริงๆ


0

หากสไตล์เป็นแบบอินไลน์เช่น <font style="font-family:Arial Narrow">some texte</font>ก็ใช้งานได้

แต่ถ้าชื่อของแบบอักษรตำรวจมีอักขระพิเศษบางตัวหรือขึ้นต้นด้วยตัวเลขที่มีเครื่องหมายคำพูดหรือสิ่งอื่น ๆ ที่แปลก (เช่น "01 Digitall" หรือ "a_CityNovaTitulB & WLt" หรือ "Bailey'sCar") คุณต้องใช้ไวยากรณ์พิเศษกับ& quot; ซึ่งสามารถใช้ได้กับชื่อฟอนต์แปลก ๆ ทุกประเภท:

<font style="font-family:&quot;a_CityNovaTitulB&WLt&quot; , &quot;Bailey'sCar&quot;">some text</font>

ใน FireFox แหล่งที่มาจะแสดงเครื่องหมาย& quot; ดังนี้: "

หากไม่มีเคล็ดลับนี้สิ่งนี้:

<font style="font-family:a_CityNovaTitulB&WLt ,Bailey'sCar">some text</font>

ไม่ทำงานโดยอัตโนมัติในทุกเบราว์เซอร์ มีประโยชน์สำหรับชื่อฟอนต์แม่มดที่เริ่มต้นด้วยตัวเลขเช่น "8 พิน"

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.