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

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

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

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

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

ОТВЕТЫ

Ответ 1

спецификация CSS 2.1 сообщает нам, что:

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

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

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

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

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

<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".