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

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

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

На всякий случай я попытался удалить кавычки, "Arial Narrow"и у Safari и Firefox нет проблем с их отображением.

Итак, есть ли в этом практическом правиле какая-то логика или это просто миф? Была ли проблема со старыми браузерами, которая больше не применима к текущим версиям? Я занимаюсь этим так долго, что никогда не переставал думать, действительно ли это необходимо.

Спецификация CSS 2.1 говорит нам, что:

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

Далее говорится:

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

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

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

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

Также обратите внимание на знаки препинания, такие как / или! внутри идентификатора также может потребоваться заключить в кавычки или экранировать.

Согласно спецификации CSS Fonts Module Level 3 от октября 2013 года, « имена семейств шрифтов, отличные от общих семейств, должны быть указаны как строки или не заключаться в кавычки как последовательность одного или нескольких идентификаторов ». Поэтому НЕ нужно заключать их в кавычки.

Однако, если вы этого не сделаете, « большинство знаков препинания и цифр в начале каждого токена необходимо экранировать ». Чтобы избежать ошибок, W3C на самом деле рекомендует заключать в кавычки имена семейств шрифтов, содержащие пробелы, цифры, знаки препинания или значения ключевых слов («наследовать», «с засечками» и т. Д.).

Общие названия семейств шрифтов ('serif', 'sans-serif', 'cursive', 'fantasy' и 'monospace') НЕ ДОЛЖНЫ быть цитированы, поскольку они фактически являются ключевыми словами.

Если стиль встроенный, вроде <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 Pin».