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

Question

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

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

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

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

Answer 1

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

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

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

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

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

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

Имена семейств шрифтов, которые совпадают со значением ключевого слова («наследовать», «с засечками», «sans-»).serif ',' monospace ',' fantasy 'и' cursive ') должны быть заключены в кавычки, чтобы не перепутать ключевые слова с одинаковыми именами.Ключевые слова 'initial' и 'default' зарезервированы для будущего использования и должны также указываться в кавычках, когда используются в качестве имен шрифтов.

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

Answer 2

В соответствии со спецификацией модуля шрифтов CSS уровня 3 от октября 2013 года, имена семейств шрифтов ", отличные от общих семейств, должны либо указываться в виде строк, либо не заключаться в кавычки как последовательность из одного или несколькихидентификаторы ». Таким образом, вам НЕ нужно заключать их в кавычки.

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

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

Answer 3

Если стиль встроенный, как <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>

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