多个字体声明出错

Question

CSS @font-face规则：

@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Light.ttf') format('truetype');
    font-weight: light;
    font-style: normal;
}
@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-HairlineItalic.ttf') format('truetype');
    font-weight: lighter;
    font-style: italic;
}
@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

及其用途：

.ingrijirea-main {
    margin-top: 100px;
    background-color: #2A2D4C;
    color: white;
    height: 500px;
}
.ingrijirea-title {
    font-size: 2em;
    text-align: center;
    margin-top: 45px;
    margin-bottom: 30px;
    p {
        margin-bottom: 0;
    }
    .ingrijirea-title-bottom {
        font-weight: lighter;
        font-style: italic;
    }
}
.ingrijirea-text {
    font-size: 1.28em;
    font-weight: light;
    text-align: justify;
    p{
        margin-bottom: 15px;
    }
    .ingrijirea-options {
        margin-top: 30px;
        p {
            margin-bottom: 7px;
        }
        p:hover {
            font-weight: bold;
        }
    }
}

这是我的 HTML：

<div class="ingrijirea">
    <div class="container-fluid">
        <div class="row ingrijirea-main">
            <div class="col-md-4 col-md-offset-2">
                <div class="ingrijirea-title">
                    <p class="ingrijirea-title-top">Lorem ipsum</p>
                    <p class="ingrijirea-title-bottom">Lorem ipsum</p>
                </div>
                <div class="ingrijirea-text">
                    <p>Lorem ipsum</p>
                    <p>Lorem ipsum</p>
                    <p>Lorem ipsum</p>
                    <div class="ingrijirea-options">
                        <p class="ingrijirea-option">Lorem ipsum</p>
                        <p>Lorem ipsum</p>
                        <p>Lorem ipsum</p>
                </div>
            </div>
        </div>
    </div>
</div>

问题是，使用此代码不仅本节，而且整个页面都转换为font-weight:light，我不知道为什么。

任何帮助将不胜感激。

Answer 1

声明的顺序应该改变

@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-HairlineItalic.ttf') format('truetype');
    font-weight: lighter;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Light.ttf') format('truetype');
    font-weight: light;
    font-style: normal;
}
@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}