На каких операционных системах или браузерах есть имена шрифтов CSS с учетом регистра

В соответствии с sitepoint (источник, которому я обычно доверяю) при указании font-family называет некоторые операционные системы/Браузеры могут быть чувствительны к регистру.

Я обычно всегда использовал значения смешанного случая, но мне интересно, будут ли значения в нижнем регистре работать одинаково?

У меня нет подавляющего предпочтения в любом случае - но я бы не хотел, чтобы страница отображалась по-другому, потому что я набрал нижний регистр "v" vs. "v" где-то в файле CSS.

например. существуют ли какие-либо известные случаи, когда 2 divs с классами foo и bar ниже отображались бы с другим шрифтом?

div.foo{
  font-family:Verdana, Arial, Helvetica;
}

div.bar{
  font-family:verdana, arial, helvetica;
}

Ответы

Ответ 1

Я предполагаю, что это будет только потенциальной проблемой для систем Linux/Unix, где файловая система чувствительна к регистру. Я был бы удивлен, если бы у Windows-браузера была проблема с этим, так как шрифты - это просто файлы в каталоге C:\Windows\Fonts.

Вы можете попробовать сделать страницу с тестовым текстом в узнаваемом шрифте, таком как Courier New, но напишите ему смешно, как "CoUrIEr nEW", затем перейдите в http://browsershots.org/, где он будет создавать скриншоты из нескольких браузеров. Не забудьте сделать шрифт слишком большим, потому что скриншоты малы.

Что-то вроде этого:

<html>
<head>
<style type="text/css">
#proper   { font: bold 48px "Courier New",Courier; }
#improper { font: bold 48px "CoUrIEr nEW",CoUrIEr; }
</style>
</head>
<body>
<p id="proper">Test1 - proper caps</p>
<p id="improper">Test2 - improper caps</p>
</body>
</html>

Если в Courier отображается только одна строка, тогда этот браузер чувствителен к регистру.

Изменить. Я тестировал HTML-код, опубликованный выше в браузерах. Я не нашел браузер, который не работал. Dillo 2.1.1 для Ubuntu Linux не понравилась ни одна строка (возможно, в этой системе не было и Courier New, и Courier?), Все остальные отображали обе строки в Courier или Courier New. Тем не менее, есть мобильные браузеры, которые не были протестированы, поэтому вы должны стремиться использовать надлежащую капитализацию на всякий случай.

Ответ 2

Хотя синтаксис CSS говорит

Всегда соблюдаются следующие правила: Все таблицы стилей CSS не зависят от регистра, за исключением частей, которые не находятся под контролем CSS. Например, чувствительность к регистру значений атрибутов HTML "id" и "class", имен шрифтов и URI лежит вне области действия этой спецификации. Обратите внимание, в частности, что имена элементов нечувствительны к регистру в HTML, но чувствительны к регистру в XML.

Раздел css3-fonts module указывает на нечувствительность к регистру:

Для других имен семейств пользовательский агент пытается найти фамилию среди шрифтов, определенных с помощью правил @font-face, а затем среди доступных системных шрифтов, сопоставляя имена с нечувствительным к регистру сравнением.

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

Ответ 3

У этого парня, кажется, есть проблемы при использовании flex, поэтому, похоже, есть правда:

При использовании CSS в Flex для стиля компоненты, свойство font-family может быть чувствительным к регистру на некоторых операционные системы. Например, после CSS не будет работать на моем Браузер Safari с Flash Player 10:

.content{font-family: arial;}

но это будет работать:

.content{font-family: arial;}

Источник

Также просмотрите эту страницу, которую вы можете использовать, чтобы проверить это в своих собственных браузерах /os:

http://meyerweb.com/eric/css/tests/font-name-case-test.html

Ответ 4

Хороший вопрос. Я лично не слышал о каких-либо проблемах, которые имеют отношение к чувствительности к регистру.

О чем вы должны беспокоиться, так это о наличии этих шрифтов в разных системах. Verdana и Arial недоступны на Mac. Helvetica недоступен в Windows. Вы определили два набора с нулевой площадью пересечения в размерах Win/Mac.