Проблемы с подключенным шрифтом

331
28 декабря 2016, 02:52

При подключении шрифта из google fonts, начинают смещаться соседние элементы от элементов с установленным шрифтом. Что за косяки? первую проблему решил вертикальным выравниванием, а вторую фиксированной высотой в 40px. Вот именно для второй проблемы, подходит фиксированная высота или лучше по-другому решить? так как в макете установлены размер и межстрочный интервал в 40px.

html, 
body { 
	margin: 0; 
	padding: 0; 
	background: #f3f3f3; 
} 
 
.title { 
	/*	height: 40px;*/ 
	margin: 20px 0; 
	background: #6a8da2; 
} 
 
.title h1 { 
	display: inline-block; 
	margin: 0; 
	margin-left: 20px; 
	padding: 0 10px; 
	font-family: "Oswald", sans-serif; 
	font-size: 40px; 
	line-height: 40px; 
	text-transform: uppercase; 
	color: #676767; 
	background: #f3f3f3; 
}
<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
	<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> 
	<link rel="stylesheet" href="style.css"> 
</head> 
<body> 
	<div class="title"> 
  	<h1>About us</h1> 
  </div>	 
</body> 
</html>

Answer 1

Добавьте vertical-align: top; к заголовку, должно помочь.

html, 
body { 
	margin: 0; 
	padding: 0; 
	background: #f3f3f3; 
} 
 
.title { 
	/*	height: 40px;*/ 
	margin: 20px 0; 
	background: #6a8da2; 
} 
 
.title h1 { 
	display: inline-block; 
	margin: 0; 
	margin-left: 20px; 
	padding: 0 10px; 
	font-size: 40px; 
	line-height: 40px; 
	font-family: "Oswald", sans-serif; 
	text-transform: uppercase; 
	color: #676767; 
	background: #f3f3f3; 
    vertical-align: top; 
}
<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
	<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> 
	<link rel="stylesheet" href="style.css"> 
</head> 
<body> 
	<div class="title"> 
  	<h1>About us</h1> 
  </div>	 
</body> 
</html>

READ ALSO
Выравнивание блоков html
HTML

Выравнивание блоков html

В общем, стоит задача сделать галерею для портфолио, блоки располагаются ровно один под одним

 408
Переход по ссылке js
HTML

Переход по ссылке js

Хочу узнать у опытных программистов, возможно ли реализовать переход по ссылке, но так чтоб оказаться на определенном блоке страницы, а не в ее начале,...

 388
Не отображается страница в uc browser
HTML

Не отображается страница в uc browser

Вот страница, которая не отображается https://dandirectorgithub

 420
Что не так с кодом? (Angularjs, Json)
HTML

Что не так с кодом? (Angularjs, Json)

Необходимо следующее:

 352