Нужно ли обертывать кавычки вокруг имен семейств шрифтов в CSS?

Я помню, как давно слышал, что считалось "лучшей практикой" обертывать кавычки вокруг имен шрифтов, содержащих несколько слов в свойстве CSS font-family, например:

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

для этого я попытался удалить кавычки из "Arial Narrow" и Safari и Firefox не имеют никаких проблем с его рендерингом.

3 ответов


на CSS 2.1 spec говорит нам, что:

имена семейств шрифтов должны быть указаны в виде строк или без кавычек как последовательность одного или нескольких идентификаторов. Это означает большую пунктуацию символы и цифры в начале каждого маркера должны быть экранированы в имена семейств шрифтов без кавычек.

Он говорит:

Если в качестве имени семейства шрифтов задана последовательность идентификаторов, то вычисленное значение имя преобразуется в строку путем объединения всех идентификаторы в последовательности по одиночным пробелам.

чтобы избежать ошибок при побеге, рекомендуется цитировать семейство шрифтов имена, содержащие пробелы, цифры или знаки препинания кроме дефисов:

Так что да, есть разница, но вряд ли вызовет какие-либо проблемы. Лично я всегда цитировал имена шрифтов, когда они содержат пробелы. В нескольких (предположительно очень редких) случаях котировки абсолютно необходимо:

имена семейств шрифтов, которые совпадают со значением ключевого слова ("наследовать", "засечка", "без засечек", "моноширин", "фантазия" и 'cursive') должны быть процитированы, чтобы предотвратить путаницу с ключевыми словами с такое же имя. Ключевые слова "initial" и "default" зарезервированы для будущего использования, а также должны быть указаны при использовании в качестве имени шрифта.

также обратите внимание, что пунктуация, такая как / или ! внутри идентификатора также может нужно для цитирования или экранирования.


по словам CSS шрифты модуль Уровень 3 spec октября 2013 года,"имена семейств шрифтов, отличные от общих семейств, должны быть указаны в кавычках как строки или без кавычек как последовательность одного или нескольких идентификаторов". поэтому вам не нужно заключать их в кавычки.

однако, если вы этого не сделаете "большинство знаков препинания и цифр в начале каждого маркера должны быть экранированы". чтобы избежать ошибок, W3C на самом деле рекомендует цитировать фамилии шрифтов, содержащие пробелы, цифры, знаки препинания или значения ключевых слов (’inherit', 'serif', etc.).

родовые имена семейства шрифтов ("засечка", "без засечек", "курсив", "фантазия" и "моноширинное") не должны цитироваться, поскольку они на самом деле являются ключевыми словами.


Если стиль встроен, например <font style="font-family:Arial Narrow">some texte</font>, это работает.

но если имя полицейского шрифта содержит некоторые специальные символы, или начинается с числа содержит кавычки или другие странные вещи (например, "01 Digitall" или " a_CityNovaTitulB & WLt "или" Bailey'SCAR"), вы должны использовать специальный синтаксис с ", который может быть применен ко всем видам своих шрифтов имена:

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

в FireFox источник покажет " как это: "

без этого трюка, это:

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

не работает автоматически в любом браузере. Это полезно для имени шрифта witch начать с числа, например, "8 Pin".