【发布时间】:2018-03-17 08:22:18
【问题描述】:
我正在尝试将 gotham 字体应用于我的按钮,但似乎没有任何问题,当我检查正在运行的索引并转到元素时,它显示 font-family 为 gotham ,但文本看起来不像 gotham .不知道我在这里做错了什么。
CSS:
@font-face {
font-family: 'Gotham';
src: url("assets\fonts\Gotham-Bold.otf") format('embedded-opentype');
src: url("assets\fonts\Gotham-Light.otf") format('embedded-opentype');
}
a:link, a:visited {
font-family: Gotham;
text-align: right;
color: white;
background: #005870;
border: none;
padding: 15px;
font-size: 2rem;
margin-top: 10px;
cursor: pointer;
position: absolute;
right: 65%;
transition: .4s;
text-decoration: none;
}
a:hover, a:active {
font-size: 2.5rem;
color: #005870;
background: white;
transition: .4s;
text-decoration: none;
}
HTML:
<div id="h1s" style="background:transparent;">
<img src = "environmental-care.jpg" id="frame"/>
<div class="h1padding"></div>
<a class = "h1" href="" id="introID">Intro</a>
<div class="h1padding"></div>
<a class = "h1" href=""><b>ON THE</b> <span class="light">SURFACE</span></a>
<div class="h1padding"></div>
<a class = "h1" href=""><b>FROM</b> <span class="light">ORE TO OIL</span></a>
<div class="h1padding"></div>
<a class = "h1" href=""><b>ENVIRONMENTAL</b> <span class="light">CARE</span></a>
<div class="h1padding"></div>
<a class = "h1" href=""><b>MUCH MORE THAN</b> <span class="light">GASOLINE</span></a>
<div class="h1padding"></div>
<a class = "h1" href=""><b>ONE MORE</b> <span class="light">THING</span></a>
<br><br>
<div class="h1padding"></div>
<div class="h1padding"></div>
</div>
【问题讨论】:
-
在浏览器的开发者工具中打开网络标签。查看字体是否加载成功。您的网址中的斜杠类型似乎有误。
-
您确定路径正确吗?看来您需要更改
\ to / -
路径应该是正确的,我也将斜杠从\更改为/,当我加载页面时,网络中的字体似乎没有下载
-
然后仔细检查路径是否正确。 应该是不是肯定是 ;)