Question

我正在尝试从我离线的免费模板更改字体。下面，您可以看到我的列表中的HTML。

<header>
    <h1><a href="index.html" id="logo"></a></h1>
        <nav>
            <ul id="menu">
                <li><a href="#!/page_Home"><span></span><strong>Home Page</strong></a></li>
                <li><a href="#!/page_About"><span></span><strong>About</strong></a></li>
                <li><a href="#!/page_Portfolio"><span></span><strong>Portfolio</strong></a></li>
                <li><a href="#!/page_Services"><span></span><strong>My Services</strong></a></li>
                <li><a href="#!/page_Contact"><span></span><strong>Contact</strong></a></li>
            </ul>
        </nav>
</header>

以下是列表的CSS：

header {
    width: 360px;
    float: left
}
#menu {
    padding-top: 122px
}
#menu > li {
    width: 100%;
    overflow: hidden;
    padding-bottom: 4px
}
#menu > li > a {
    display: inline-block;
    font-size: 26px;
    line-height: 54px;
    height: 56px;
    color: #fff;
    background: #000;
    text-decoration: none;
    position: relative;
    letter-spacing: 0px;
    cursor: pointer
}
#menu > li > a span {
    display: block;
    background: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}
#menu > li > a strong {
    position: relative;
    display: block;
    padding: 0 95px 0 40px;
    height: 56px
}
#menu > li > a:hover,
#menu > li > a.active {
    color: #000
}
#menu > li > a:hover strong,
#menu > li > a.active strong {}

现在，我想将字体更改为Source Sans Pro，这是从Google导入的。但是，我无法让它发挥作用。所以我使用默认字体来查看我是否搞乱了字体的谷歌导入，这不起作用。下面，您可以看到我尝试解决此问题：

#menu > li > a {
    font-family: "Times New Roman";
    display: inline-block;
    font-size: 26px;
    line-height: 54px;
    height: 56px;
    color: #fff;
    background: #000;
    text-decoration: none;
    position: relative;
    letter-spacing: 0px;
    cursor: pointer
}

我已经检查过是否有任何！重要内容阻止内联样式覆盖，但在任何CSS样式中都没有。

总结一下，我试图使用内联CSS样式更改字体但是失败了。有人可以帮忙吗？

Answer 1

首先在link中添加从谷歌获得的Source Sans Pro字体的head。这是从谷歌

获得的

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pr‌o" rel="stylesheet">

然后在css添加

font-family: 'Source Sans Pro', sans-serif;

或者您可以尝试使用提供的@import谷歌。在html添加

的标题中

<style>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
</style>

然后是font-family

font-family: 'Source Sans Pro', sans-serif;

＆＃13;

header {
    width: 360px;
    float: left
}
#menu {
    padding-top: 122px
}
#menu > li {
    width: 100%;
    overflow: hidden;
    padding-bottom: 4px
}
#menu > li > a {
    display: inline-block;
    font-size: 26px;
    line-height: 54px;
    height: 56px;
    color: #fff;
    background: #000;
    text-decoration: none;
    position: relative;
    letter-spacing: 0px;
    cursor: pointer
}
#menu > li > a span {
    display: block;
    background: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}
#menu > li > a strong {
    position: relative;
    display: block;
    padding: 0 95px 0 40px;
    height: 56px
}
#menu > li > a:hover,
#menu > li > a.active {
    color: #000
}
#menu > li > a:hover strong,
#menu > li > a.active strong {}
#menu > li > a {
    font-family: 'Source Sans Pro', sans-serif;
    display: inline-block;
    font-size: 26px;
    line-height: 54px;
    height: 56px;
    color: #000;
    background: #000;
    text-decoration: none;
    position: relative;
    letter-spacing: 0px;
    cursor: pointer
}

＆＃13;

<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
</head>
<body>
<header>
    <h1><a href="index.html" id="logo"></a></h1>
        <nav>
            <ul id="menu">
                <li><a href="#!/page_Home"><span></span><strong>Home Page</strong></a></li>
                <li><a href="#!/page_About"><span></span><strong>About</strong></a></li>
                <li><a href="#!/page_Portfolio"><span></span><strong>Portfolio</strong></a></li>
                <li><a href="#!/page_Services"><span></span><strong>My Services</strong></a></li>
                <li><a href="#!/page_Contact"><span></span><strong>Contact</strong></a></li>
            </ul>
        </nav>
</header>
</body>
</html>

＆＃13;

希望这有效

使用Google字体通过CSS更改字体

1 个答案: