Ошибка: Испытание: карточка курса [9/18]

Курсы §14. Мастерская: декоративные элементы
1

Сгенерированная картинка результата показывает совсем другой шрифт.
В результате 100% выполнение задания невыполнимо!
!important не помогает исправить шрифт. Он упорно не Arial;
Кроме того отступы для body работают весьма странно. Сверху сами по себе добавляются лишние пиксели.
Различными ухищрениями можно прийти к правильному результату, но всё ломает несоответствие шрифта.

Bug.png1198×758 102 KB

P.S. CSS оставлен в промежуточном состоянии. Замечание касается только шрифта.

2

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

3

Код нерабочий. Это просто набросок. Можно добиться большего процента, если использовать line-height и отрицательные отступы.
Но, как я писал выше, начинаются какие-то непонятные проблемы с отступами у body и первого div. Встроенный генератор картинок начинает генерировать что-то странное.
http://codepen.io/ilabacheuski/full/bVNGgr/ - codepen отрисовывает нормально. Может только у меня, конечно есть Arial… :slight_smile:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: карточка курса</title>
    </head>
    <body>
        <div class="card">
        <h1>Курс &laquo;Фоны&raquo;</h1>
        <p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
        <div class="social social-fb"></div>
        <div class="social social-tw"></div>
        <div class="social social-g"></div>
        </div>
    </body>
</html>

html, body {
    margin: 0;
    padding: 0;
    background: #ecf001;
}

body {
    margin: 0;
    padding: 0;
    width: 280px;
    min-height: 280px;
    padding-top: 20px;
    padding-left: 20px;
    font-size: 14px;
    font-family: "Arial", sans-serif !important;
    line-height: 1.2;
    background: #ecf0f1;
}

.card{
    margin: 0;
    padding: 0;
    background-color:#1abc9c;
    width:200px;
    //height:230px;
    padding:20px 20px 0;
    color:white;
    //margin-top:-20px;
    padding:20px;
    height:195px;
}
.card h1{
    margin: 0;
    padding: 0;
    font-size:20px;
    font-weight:normal;
    //line-height:50px;
    margin:0;
    margin-bottom:20px;
    //letter-spacing:-2px;
    font-family: "Arial", sans-serif !important;
    
}
p {
    margin: 0;
    padding: 0;
    margin-bottom: 25px;
    margin:0;
    
}
.social{
    display:inline-block;
    height:30px;
    width: 30px;
    background: #16a085 url('/assets/course14/social-challenge.png') no-repeat;
    margin-right:5px;
    margin-top: 25px;
}
.social-fb{
    background-position: 0 0;
}
.social-tw{
    background-position: -30px 0px;
}
.social-g{
    background-position: -60px 0;
}

/*
.card {
    width: 200px;
    color: #fff;
    padding: 20px;
    background-color: #1abc9c;
    height:195px;
}

h1 {
    font-weight: normal;
    font-size: 20px;
    margin: 0;
    margin-bottom: 20px;
}

p {
    margin-bottom: 0px;
}

.social {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 5px;
    margin-bottom: 17px;
    background: url("/assets/course14/social-challenge.png") #16a085 no-repeat;
     margin-top: 25px;
}

.social-tw {
    background-position: -30px 0;
}

.social-g {
    background-position: -60px 0;
}*/
/*
Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10.
Адрес картинки-спрайта:
/assets/course14/social-challenge.png
*/
4

Несоответствие не в шрифте. Посмотрите во влкадки «Различия» и «Наложение».

В «серверном» браузере шрифты отрисовываются немного по-другому. Не обращайте на это внимание. :blush:

5

А я не утверждал, что код закончен и верен.
Я указал на такой момент, что шрифт на картинке образца не соответствует шрифту на генерируемой картинке в “серверном” браузере.
Решение может быть весьма простое - замена картинки образка и правка CSS правила для семейства шрифта.
По другому 100% совпадение недостижимо.

И ещё я подозреваю, что серверный браузер иногда сам добавляет отступы и от этого никак не избавится. Но я эту проблему не проверял.

Возможно я не прав в чём-то. Задание я давно прошёл с каким-то 90% результатом. Представленный код СSS - это не решение. Это просто черновик, который показывает несоответствие шрифтов.

1 лайк
6

Хорошо, в будущем постараемся разобраться с этой проблемой, спасибо!

7

Здравствуйте, я вообще не могу понять сколько же ширина и высота у этого блока? Когда меряю линейкой, то 300px и 290px, но получается намного больше, и как мерить в этих окошках, не понимаю. И это у меня почти с каждым заданием в котором есть рамки или border.

8

Не измеряйте высоту и не ограничивайте ее. Ориентируйтесь по вкладке “Различия”.

9 
<div class="card">
    <span>Курс &laquo;Фоны&raquo;</span>
    <p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
    <div class="social-icons">
        <a href="#" class="social social-fb">FB</a>
        <a href="#" class="social social-tw">TW</a>
        <a href="#" class="social social-go">GO</a>
    </div>
    </div>



.card {
background-color: #1abc9c;
padding: 20px 20px;
width: 200px;

}
.card span {
display:block;
color: #ffffff;
font-size: 20px;
margin-bottom: 20px;
}
.card p {
color: white;
margin-bottom: 10px;
}
.social {
display: inline-block;
width: 30px;
height: 30px;
font-size: 0;
background-color: #16a085;
margin-right: 5px;
margin-top: 15px;
background-image: url("/assets/course14/social-challenge.png");
background-repeat: no-repeat;
vertical-align: middle;
text-align: center;
line-height: 30px;
}
.social-fb {
background-position: 0px 0px;
}
.social-tw {
background-position: -30px 0px;
}
.social-go {
background-position: -60px 0px;
}