标签 css 不适用于“a”标签中的文本

Posted 2023-03-15

【中文标题】标签 css 不适用于“a”标签中的文本

【英文标题】：a tag css not working for text in 'a' tag

【发布时间】：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 /

路径应该是正确的，我也将斜杠从\更改为/，当我加载页面时，网络中的字体似乎没有下载

然后仔细检查路径是否正确。 应该是不是肯定是 ;)

可能重复：***.com/questions/3245141/…

【参考方案1】：

已解决： Chrome 不关心格式，删除它并且它正在工作:)

src: url("assets\fonts\Gotham-Bold.otf") format('embedded-opentype');
src: url("assets\fonts\Gotham-Light.otf") format('embedded-opentype');

改为：

src: url("assets\fonts\Gotham-Bold.otf");    
src: url("assets\fonts\Gotham-Light.otf");