Почему вместо русского текста выводятся ромбики?

Иногда при отображении веб-страницы в браузере вместо текста можно наблюдать ромбики или другие символы. Но совсем не тот текст, который мы ожидаем (рис. 1).

Рис. 1. Нечитаемый текст в браузере

Такое происходит при сохранении файла в неверной кодировке, например, в ANSI. Недостаточно добавить <meta charset="utf-8"> в код, нужно чтобы и сам HTML-файл был сохранён в UTF-8. Для этого следует использовать редакторы, которые поддерживают кодировку UTF-8 и при необходимости могут преобразовать текст из одной кодировки в другую.

К примеру, в популярном редакторе Visual Studio Code нужная кодировка отображается в правом нижнем углу окна (рис. 2).

Рис. 2. Кодировка текста в VS Code

Для смены кодировки достаточно щёлкнуть по её названию и в появившемся окне выбрать пункт «Сохранить в кодировке». После чего будет предложен список доступных кодировок (рис. 3).

Рис. 3. Выбор кодировки

После сохранения файла текст в браузере будет отображаться корректно.

Автор: Влад Мержевич
Источник: webref.ru