Получить профессию в Skypro
Кодировка символа градуса Цельсия в веб-страницах
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Для отображения символа градуса Цельсия (°C) на веб-странице внутри HTML кода можно использовать °C.
<p>Текущая температура: 20°C</p> <!-- Брр... Время одеться потеплее! -->В результате на веб-странице вы увидите следующее: "Текущая температура: 20°C".
Обеспечение правильного отображения специальных символов
Чтобы специальные символы отображались корректно, убедитесь, что для вашей веб-страницы установлена кодировка UTF-8. Для этого в секции <head> документа добавьте следующий мета-тэг:
<meta charset="utf-8"> <!-- Кодировка важна для всех, даже для "единорогов"! -->Как избежать проблем с автоматическими переносами строк
Вероятно, вам знакома ситуация, когда автоматические переносы строк разрывают выражения или строки кода. Чтобы избежать такой проблемы, используйте тег <nobr>:
<nobr>20°C</nobr> <!-- Обозначение температуры и символ градуса останутся вместе! -->Другим решением может быть применение CSS:
.temperature {
white-space: nowrap; /* Чтобы обозначение температуры не разделялось на две строки! */
}Применение пользовательских шрифтов
Если вам требуется применить специальные стили или шрифты для символа градуса Цельсия, вы можете используйте CSS-правило @font-face с выбранным шрифтом:
@font-face {
font-family: 'CustomFont'; /* Добавим элегантности */
src: url('CustomFont.woff2') format('woff2');
}
.temperature {
font-family: 'CustomFont', sans-serif;
}Ссылки на символы: Unicode и CSS Content
Как альтернативу HTML-сущностям, вы можете использовать Unicode-ссылку на символ ℃:
<p>Текущая температура: 20℃</p> <!-- Это неповторимо, не так ли? -->Для вставки символа градуса Цельсия свойством content в CSS вы можете обратиться к псевдо-элементу ::after:
.temp::after {
content: '\00B0C'; /* Чувствуете теплоту? */
}Увеличение доступности контента
Для повышения доступности ваших контентов для всех пользователей, в том числе и тех, кто использует вспомогательные устройства, добавьте aria-label для улучшения семантики:
<span aria-label="градусы Цельсия">20°C</span> <!-- Даже "роботы" будут нам благодарны! -->Использование <sup> поможет визуальноредить символ градуса:
<p>Текущая температура: 20<sup>°</sup>C</p> <!-- "C" означает "Класс!" -->Проверка кодировки вашего документа
Проверьте кодировку на различных устройствах и браузерах для того чтобы гарантировать, что все пользователи видят контент одинаково. Любые различия в отображении могут повлиять на восприятие вашего сайта.
Вот как выглядят наилучшие практики:
- Укажите DOCTYPE и кодировку символов в начале документа.
- Кодируйте специальные символы аккуратно.
- Используйте CSS для решения проблем отображения.
- Следите за обновлениями стандартов в области веб-разработки.
Визуализация
Визуализация символа градуса Цельсия помогает упростить его кодирование:
🌡️ – Термометр может показывать не только температуру...
Методы кодирования:
1. HTML-сущность: **°C**
2. Unicode: **℃** или **°C**
3. CSS: **content: '\2103';**
Вот как это выглядит в браузере:
1. 72°C превращается в 72°C
2. 72℃ становится 72°C
3. .temp::after { content: '\2103' } преображается в 72°CВыберите наилучший способ отображения для корректного указания температуры на вашем сайте. 😉
Обеспечение согласованности кодировки на стороне сервера
Если настройки сервера противоречат настройкам на стороне клиента, кодировка может быть некорректной. Проверьте HTTP заголовки для обеспечения согласованности:
Content-Type: text/html; charset=utf-8 /* Коммуникация – это ключ к успеху! */Полезные материалы
- HTML-сущности (HTML Character Entities) — Обстоятельное руководство по специальным символам HTML.
- HTML-стандарт — Официальный документ по HTML-сущностям.
- Unicode-символ 'ГРАДУС ЦЕЛЬСИЯ' (U+2103) — Информация о символе градуса Цельсия в Unicode.
- Глифы | CSS-Tricks — CSS-Tricks с визуальными примерами HTML-сущностей.
- <meta>: Метатег – HTML: HyperText Markup Language | MDN — Руководство по настройке кодировки символов, предоставленное ресурсом MDN.
- Как кодировать символ в HTML-сущность в чистом JavaScript – Stack Overflow — Советы от сообщества разработчиков.