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
,我不明白为什么。
任何帮助都将不胜感激。
答案 0 :(得分:0)
声明的顺序应该改变
@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;
}