Tôi có cần đặt dấu ngoặc kép quanh tên họ phông chữ trong CSS không?


92

Tôi nhớ cách đây rất lâu đã nghe nói rằng cách đặt dấu ngoặc kép quanh tên phông chữ có chứa nhiều từ trong thuộc tính CSS font-family được coi là "phương pháp hay nhất" được coi là "phương pháp hay nhất", như sau:

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

Đối với nó, tôi đã thử xóa các dấu ngoặc kép khỏi "Arial Narrow"và Safari và Firefox không gặp bất kỳ vấn đề gì khi hiển thị nó.

Vì vậy, có bất kỳ logic nào cho quy tắc ngón tay cái này, hay nó chỉ là một huyền thoại? Đó có phải là vấn đề với các trình duyệt cũ hơn không còn áp dụng cho các phiên bản hiện tại không? Tôi đã làm việc này lâu đến mức không bao giờ ngừng suy nghĩ xem nó có thực sự cần thiết hay không.


Tôi nghĩ rằng đó là một ý tưởng hay để trích dẫn từng họ phông chữ, ít hơn những họ chung chung. Nó giữ cho mọi thứ nhất quán.
Micah Henning

Câu trả lời:


78

Thông số CSS 2.1 cho chúng ta biết rằng:

Họ phông chữ phải được cung cấp trích dẫn dưới dạng chuỗi hoặc không được trích dẫn dưới dạng chuỗi một hoặc nhiều số nhận dạng. Điều này có nghĩa là hầu hết các ký tự dấu câu và chữ số ở đầu mỗi mã thông báo phải được thoát ra trong tên họ phông chữ không được trích dẫn.

Nó tiếp tục nói:

Nếu một chuỗi số nhận dạng được cung cấp dưới dạng tên họ phông chữ, giá trị được tính toán là tên được chuyển đổi thành chuỗi bằng cách kết hợp tất cả các số nhận dạng trong chuỗi bằng dấu cách đơn.

Để tránh những sai lầm khi thoát, bạn nên trích dẫn tên họ phông chữ có chứa khoảng trắng, chữ số hoặc ký tự dấu câu khác với dấu gạch ngang:

Vì vậy, có, có một sự khác biệt, nhưng một sự khác biệt không thể gây ra bất kỳ vấn đề nào. Cá nhân, tôi đã luôn trích dẫn tên phông chữ khi chúng chứa khoảng trắng. Trong một số trường hợp (có lẽ là rất hiếm), các dấu ngoặc kép là hoàn toàn bắt buộc:

Họ phông chữ giống với giá trị từ khóa ('inherit', 'serif', 'sans-serif', 'monospace', 'fantasy' và 'thảo mộc') phải được trích dẫn để tránh nhầm lẫn với các từ khóa với những cái tên giống nhau. Các từ khóa 'ban đầu' và 'mặc định' được dành để sử dụng trong tương lai và cũng phải được trích dẫn khi được sử dụng làm tên phông chữ.

Cũng lưu ý rằng dấu câu như / hoặc! trong một mã định danh cũng có thể cần được trích dẫn hoặc thoát.


6
initialdefaultcũng là từ khóa (chúng được dành để sử dụng trong tương lai). Xem Tên họ phông chữ chưa được trích dẫn trong CSS .
Mathias Bynens

21

Theo thông số kỹ thuật của Mô-đun Phông chữ CSS cấp 3 vào tháng 10 năm 2013, " tên họ phông chữ khác với họ chung chung phải được trích dẫn dưới dạng chuỗi hoặc không được trích dẫn dưới dạng chuỗi một hoặc nhiều số nhận dạng ". Vì vậy, bạn KHÔNG cần đặt chúng trong dấu ngoặc kép.

Tuy nhiên, nếu bạn không " hầu hết các ký tự dấu câu và chữ số ở đầu mỗi mã thông báo phải được thoát ". Để tránh mắc lỗi, W3C thực sự khuyên bạn nên trích dẫn tên họ phông chữ có chứa khoảng trắng, chữ số, dấu chấm câu hoặc giá trị từ khóa ('inherit', 'serif', v.v.).

Các tên họ phông chữ chung chung ('serif', 'sans-serif', 'thảo mộc', 'tưởng tượng' và 'monospace') KHÔNG ĐƯỢC trích dẫn vì chúng thực sự là từ khóa.


0

Nếu phong cách là nội tuyến, giống như <font style="font-family:Arial Narrow">some texte</font>, nó hoạt động.

Nhưng nếu tên của phông chữ cảnh sát có chứa một số ký tự đặc biệt hoặc bắt đầu bằng một số chứa dấu ngoặc kép hoặc những thứ khác lạ (như "01 Digitall" hoặc "a_CityNovaTitulB & WLt" hoặc "Bailey'sCar"), bạn phải sử dụng cú pháp đặc biệt với & quot; có thể được áp dụng cho tất cả các loại tên phông chữ dải:

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

Trong FireFox, nguồn sẽ hiển thị & quot; như sau: "

nếu không có thủ thuật này, điều này:

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

không tự động hoạt động trong mọi trình duyệt. Nó hữu ích cho phù thủy tên phông chữ bắt đầu bằng một số, chẳng hạn như "8 Pin".

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.