Вопрос:
Может кто-то уточнить, почему ниже настройки стиля шрифта не работают в хроме, но работают в IE и FireFox.
У моего веб-сайта такая же проблема, он не подбирает настройки шрифта CSS (где упоминается normal режим), поэтому я тестировал тестовую среду CSS из W3Schools, и поведение такое же.
Фрагмент CSS:
- Работает только в IE/FireFox: font-family: Arial, Helvetica, sans-serif normal;
- Работа во всех браузерах: font-family: Arial, Helvetica, sans-serif;
Попробуйте в Chrome и IE увидеть разницу.
body { font-family: «Times New Roman», serif; } p.serif { font-family: Arial, Helvetica, sans-serif; } p.sansserif { font-family: Arial, Helvetica, sans-serif normal; }<h1>CSS font-family</h1> <p class=»serif»>This is a paragraph, shown in Arial Without Normal.</p> <p class=»sansserif»>This is a paragraph, shown in Arial With Normal</p>
Ниже приведены вопросы:
- Не могли бы вы объяснить, почему разница между этими двумя браузерами?
- Как обеспечить, чтобы стили CSS были выбраны Chrome и IE/FireFox (Должен ли я удалять normal из всех моих файлов CSS или есть ли лучший способ сделать это)?
Примечание. Я начинаю разработку веб-страниц, извиняюсь, если вопрос очень прост.
Заранее спасибо.
Лучший ответ: Возможно недопустимое объявление font-family
Если вы откроете свой инспектор браузера (Ctrl + Shift + i в Chrome), вы увидите, что правило CSS
p.sansserif { font-family: Arial, Helvetica, sans-serif normal; }
не применяется.
В соответствии с спецификациями CSS неверное правило игнорируется, и все, что было бы применено (назад к каскаду), применяется вместо или более точно, а не отменено.
В этом случае результат «Times New Roman» – как показано в “Вычисленных стилях”.
Чтобы установить font-style (-variant, -weight, -stretch или line-height (в зависимости от того, что вы пытались установить в normal)), мы можем либо использовать именно это, либо использовать стенографию font.
Свойство CSS шрифта является либо сокращенным свойством для установки font-style font-variant, font-variant, font-weight, font-size, line-height font-family…
(с оговорками).
Что касается разницы между IE (и FF) и Chrome
Chrome признает в утверждении с разделителями-запятыми, что sans-serif normal не является font-family, тогда как IE не делает этого.
Если вы упростите правило:
p.sansserif { font-family: sans-serif normal; }
и просмотрите результат в IE, вы увидите, что <p> находится в «Times New Roman» поскольку, хотя IE принимает декларацию, он не может ничего с ней сделать.
Больше из спецификаций:
… рекомендуется указывать имена семейств шрифтов, которые содержат пробелы, цифры или знаки пунктуации, отличные от дефиса.
Для предотвращения путаницы с ключевыми словами с одинаковыми именами должны быть указаны имена семейств шрифтов, которые совпадают с ключевыми словами (” inherit, ” serif, ” sans-serif, ” monospace, ” fantasy и ” cursive).
Поэтому рекомендуется, чтобы семейство шрифтов, называемое стандартом sans-serif normal обозначалось как «sans-serif normal».
И если семейство шрифтов использует то же имя, что и ключевое слово, оно должно быть процитировано.
- И Chrome, и IE будут принимать Comic Sans MS или Times New Roman и т.д. С кавычками или без них и применять их правильно.
- Chrome отклоняет некорректное использование ключевого слова sans-serif где он находит его в сочетании с normal, но будет принимать оба значения, если они указаны, хотя он не сможет применить этот шрифт, если он не сможет найти его с таким именем.
- IE принимает sans-serif normal как возможно некорректное имя семейства шрифтов, и это, возможно, правильно, поскольку ключевое слово является лишь частью предполагаемого фамилии, а не всего.
- Хром, возможно, неправильно, отвергает то, что он предполагает, является неверным утверждением.
