До этого всё время делал в head ссылку на шрифт в google fonts вот так <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Теперь возникла необходимость использовать шрифт, которого там нет. В каком формате скачивать нужный шрифт и как его правильно подключить? Пытался так:
h1{
font-family: 'Proxima Nova Bold', sans-serif;
src: url('fonts/ProximaNova-Bold.eot');
font-weight: normal;
font-style: normal;
}
Но как я понял для этого нужно использовать @font-face. Что это такое и с чем его едят?)
файл шрифта подключается один раз в начале css следующим образом:
@font-face{
font-family: 'Proxima Nova';
src: url('../fonts/ProximaNova-Semibold.eot');
src: url('../fonts/ProximaNova-Semibold.eot?iefix') format('eot'),
url('../fonts/ProximaNova-Semibold.woff') format('woff'),
url('../fonts/ProximaNova-Semibold.ttf') format('truetype'),
url('../fonts/ProximaNova-Semibold.svg#webfont') format('svg');
font-weight: normal;
font-style: bold;
}
в том случае когда у шрифтов разные файлы для отрисовки нормального начертания, жирного, италик и т.п. задаётся одинаковый font-family (например 'Proxima Nova') но в зависимости от начертания меняем font-weight и font-style
@font-face{
font-family: 'Proxima Nova';
src: url('../fonts/ProximaNova-Regular.eot');
src: url('../fonts/ProximaNova-Regular.eot?iefix') format('eot'),
url('../fonts/ProximaNova-Regular.woff') format('woff'),
url('../fonts/ProximaNova-Regular.ttf') format('truetype'),
url('../fonts/ProximaNova-Regular.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
а затем можете использовать стили как обычно
h1{
font-family: 'Proxima Nova', sans-serif;
font-weight: bold;
font-style: normal;
}
Есть вертикальный список div'ов,с классом res и функция,которая происходит при наведении курсора мыши на этот блок
Нужно чтобы карта была в целом 1000на1000, но ВИДНАЯ часть лишь 100на100, как это сделать? Можно ли как-то указать координаты начала ВИДИМОГО экрана...
Есть макет и мне интересно как можно сверстать навигацию(белый блок сверху)Размер макета 1600px, а отступы по 210px, получается размер контента(центровщика)...