Sublime вместо кириллицы показывает это РћРЎРљРђР. В чем ошибка?

Question

[Контогор-Егор Павлов]

Работаю на Mac OS X Catalina в sublime text 3, пишу сайты на русском языке, открываю браузер, а там ЛУЧШРР™ РЕЖРРЎРЎР•Р. Я только учусь этому языку. Вот сам код

<style type="text/css">
	.container {
		background-color: black;
		height: 900px;
		width: 900px;
		margin-left: auto;
		margin-right: auto;
	}
	.oscar2019 {
		text-align: center;
		font-family: Arial;
	}
	.title {
		background-color: blue;
		height: 30px;
		
	}
	.content_Rej {
		background-color: #c7eddb;
		height: 300px;
		margin-top: 5px;
		margin-bottom: 5px;
	}
	.content_Mr {
		background-color: #9ea19c;
		height: 300px;
		margin-top: 5px;
		margin-bottom: 5px;
	
	}
	.content_Ms {
		background-color: #6e6c6a;
		height: 300px;
		margin-top: 5px;
		margin-bottom: 5px;

	}
	.content_block {
		display: flex;
		
		height: 250px;
	}
	.winner {			
		height: 240px;
		width: 300px;			
	}
	.nominate_block {			
		height: 240px;
		width: 600px;				
	}
	.img {
		width: 100px;
	}
	.nominate_Rej {
		background-color: green;
		height: 50px;
		margin-bottom: 5px;
	}
	.nominate_Act {
		background-color: orange;
		height: 50px;
		margin-bottom: 5px;
	}
	.nominate_Actress {
		background-color: red;
		height: 50px;
		margin-bottom: 5px;
	}

	.text_Rej {
		font-family: Arial;
		font-weight: bold;
		color: pink;
	}

	.text_Act {
		font-family: Arial;
		font-weight: bold;
		color: yellow;
	}

	.text_Actress {
		font-family: Arial;
		font-weight: bold;
		color: white;
	}
</style>
<h1 class="oscar2019">ОСКАР 2019</h1>
<div class="container">
	<div> <!--Див родитель "Режиссер"-->
		<div class="title">
			<h2>ЛУЧШИЙ РЕЖИССЕР</h2>				
		</div>	
		<div>
			<div>
				<img src="img/1.jpg">
				<h2>Альфонсо Куарон - "Рома"</h2>					
			</div>
			<div>
				<p>Номинанты</p>
				<div>
					<p>Спайк Ли - Черный клановец</p>
				</div>
				<div>
					<p>Адам МакКэй - Власть</p>
				</div>
				<div>
					<p>Йоргос Лантимос - Фаворитка</p>
				</div>					
			</div>				
		</div>		
	</div>
	<div>  <!--Див родитель "Актеры"-->
		<div>	
			<h2>ЛУЧШАЯ МУЖСКАЯ РОЛЬ</h2>			
		</div>
		<div>
			<div>
				<img src="img/2.jpg">
				<h2>Рами Малек - "Богемская рапсодия"</h2>							
			</div>
			<div>
				<p>Номинанты</p>
				<div>
					<p>Брэдли Купер - Звезда родилась</p>
				</div>
				<div>
					<p>Кристиан Бейл - Власть</p>
				</div>
				<div>
					<p>Вигго Мортенсен - Зеленая книга</p>
				</div>						
			</div>							
		</div>			
	</div>

	<div> <!--Див родитель "Актрисы"-->
		<div>	
			<h2>ЛУЧШАЯ ЖЕНСКАЯ РОЛЬ</h2>		
		</div>		
		<div>	
			<div>
				<img src="img/3.jpg">
				<h2>Оливия Колман- "Фаворитка"</h2>					
			</div>
			<div>
				<p>Номинанты</p>
				<div>
					<p>Леди Гага - Звезда родилась</p>
				</div>
				<div>
					<p>Ялица Апарисио - Рома</p>
				</div>
				<div>
					<p>Гленн Клоуз - Жена</p>
				</div>						
			</div>						
		</div>		
	</div>
</div>

Answer 1

[dollar]

Сразу видно, что это текст в UTF-8, который хотят отобразить в кодировке Windows-1251.

Для начала надо понять, в какой кодировке сам файл. То, что вы сюда скопипастили, ничего не говорит о файле. Желательно использовать именно UTF-8 в файле. Далее, сервер в HTTP-заголовке должен отдавать сообщение о том, что файл именно в этой кодировке. И если сервер не умеет или вам лень его настраивать, то можно в самом HTML указать, что файл в этой кодировке. Как-то так:
<meta charset="UTF-8">

В конце концов последнее слово за бразуером. Если он по каким-то причинам не захочет отображать в нужной кодировке, то проблема в нём.

Answer 2

[SagePtr]

Для начала - посмотреть заголовок Content-Type, который отдаёт сервер, если там что-то вроде text/html; charset=windows-1251 (или любая другая кодировка, не соответствующая действительности) - то перенастроить, чтобы кодировка была правильная в заголовке. Кодировка в заголовке имеет приоритет над кодировкой, указанной в мета-тэге (по крайней мере, в Firefox и Chrome, в других браузерах не тестировал), потому даже если в мета-тэге указана правильная кодировка, в заголовке всё равно может при этом неправильная быть и из-за этого отображаться неправильно.

Answer 3

[Sunflowerz]

Добавьте теги html и body!

<htm lang="ru"l>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <title>Toaster/title>
</head>
<body >

  Ваш код

</body>
</html>

Answer 4

[Mikhail Osher]

https://habr.com/ru/post/147843/