Может ли кто-нибудь объяснить, почему использование веб-безопасных шрифтов в CSS не работает для меня?

Question

Я знаю, что это очень простой и глупый вопрос, но, похоже, у меня действительно любопытная проблема.

При использовании шрифтов, которые считаются безопасными для Интернета, например Didot, и

header h1{
font-family: Didot, serif;
font-size: 36px;
}

мой браузер просто отображает стандартный шрифт с засечками.

На самом деле я не могу заставить его отображать какой-либо веб-безопасный шрифт, он будет отображать только стандартный шрифт с засечками или без засечек. Я знаю, что мой селектор правильный, потому что я МОГУ переключаться между шрифтами с засечками и без засечек, но я знаю, что он не отображает другие веб-безопасные шрифты, потому что я пробовал и Arial, и Helvetica (которые определенно безопасны в Интернете) и когда я обновлялся с одного на другое - абсолютно никакой разницы в отображаемом шрифте.

Я полный новичок, и я использую простейшую среду для начинающих, просто html-страницу со ссылкой на файл css, который я открываю в моем браузере (URL-адрес отображается как file:///C:/Users/ Агент%201/Desktop/Web%20Projects/ResumeSite/index.html, если это вообще актуально). Я пробовал открыть его как хромом, так и кромкой, результаты одинаковые на обоих

Что-то не так с моим css? Или есть ограничения при открытии локального html-файла в моем браузере?

Извините, если это действительно глупый вопрос, но я действительно не могу найти ответа, почему мои шрифты не работают, я пробовал! Important и другое странное решение, которое я нашел, которое включает в себя изменение селектора на "заголовок h1, заголовок h1 *" и ничего не сделал.

Спасибо за любую помощь, которую вы можете мне оказать!

Answer 1

При использовании шрифтов, которые считаются безопасными для Интернета, например Didot, и используя...

• Didot не является "веб-безопасным" шрифтом.
• "Веб-безопасный" шрифт - это шрифт, который широко устанавливается и поддерживается большинством современных браузеров без необходимости дополнительных загрузок или установки шрифтов.
  • Многие гарнитуры широко используются, например , шрифты Microsoft Core для Интернета, которые предустановлены на всех компьютерах с Windows, и многие другие операционные системы, такие как macOS, либо поставляются с теми же шрифтами, либо имеют очень похожие эквиваленты (например, Helvetica вместо Arial), которые являются автоматически отображается браузером.

"Стек шрифтов, безопасный для Интернета" означает, что хотя бы один из шрифтов, перечисленных вfont-family Можно с уверенностью предположить, что значение свойства доступно для использования, а не то, что все они доступны, или что будет доступен первый предпочтительный шрифт.

И любой font-familylist можно сделать "безопасным", добавив в конец резервное имя родового семейства CSS (т.е. указав наименее предпочтительный шрифт). Эти имена указаны в модуле CSS Fonts и являются:

• serif
• sans-serif
• cursive
• fantasy
• monospace

В вашем случае недвижимость font: Didot, serif "безопасен в Интернете", поскольку имеет serifродовое имя в конце. Ваши посетители будут видеть толькоDidot шрифт используется, если он уже установлен на их компьютере, телефоне, планшете и т. д.

Если вы хотите использовать Didot, то вам нужно опубликовать его как файл WOFF и добавить в свою таблицу стилей с @font-faceправило: https://css-tricks.com/snippets/css/using-font-face/