在 CSS 中添加自定义字体答案

【问题标题】：Adding custom fonts in CSS在 CSS 中添加自定义字体
【发布时间】：2020-01-16 02:06:55
【问题描述】：

我刚开始使用 HTML、CSS 和 co。在过去的一个小时左右，我尝试在我的项目中实现自定义字体。我已经尝试了一切，创建了一个字体文件夹或将字体文件放在与我的 index.html 文件相同的目录中，但没有任何效果！

感谢每一个帮助，解决这个问题！ :)

    font-family: league_spartanregular;
    src: url('leaguespartan-bold-webfont.eot');
    src: url('leaguespartan-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('leaguespartan-bold-webfont.woff2') format('woff2'),
         url('leaguespartan-bold-webfont.ttf') format('truetype'),
         url('leaguespartan-bold-webfont.svg#league_spartanregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{
    background-color: #f4f4f4
}

#main-header{

text-align: center;
font-family: league_spartanregular;
font-size: 80px;
}

p{
    font-family: league_spartanregular;
}

【问题讨论】：

标签： html css fonts font-face webfonts

【解决方案1】：

查看 Google 字体！ :) 只需搜索您的字体，然后单击一个，底部就会有一个选项卡。单击它，您可以在样式表链接上方的 HTML 中包含一个链接。 https://fonts.google.com/

我在这里也有点新，如果我的回答不令人满意，请道歉。干杯:)

【讨论】：

是的，我已经尝试过了，而且效果很好，但我希望能够处理各种可能性。不过还是谢谢！！！

【解决方案2】：

将字体保存在 /fonts 文件夹中，这将有助于网站结构清晰。请记住 - 文件中的所有内容都与该文件相关 - 意思是，如果您将这些字体放在 /css 文件夹中 - 它会起作用。

如果您想返回文件夹结构，只需使用../。如果您想将图像存储在 /img 中而不是 /css/img 中，这将非常有用。

@font-face{
    font-family: league_spartanregular;
    src: url('../fonts/leaguespartan-bold-webfont.eot');
    src: url('../fonts/leaguespartan-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/leaguespartan-bold-webfont.woff2') format('woff2'),
         url('../fonts/leaguespartan-bold-webfont.ttf') format('truetype'),
         url('../fonts/leaguespartan-bold-webfont.svg#league_spartanregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

【讨论】：

【解决方案3】：

如果此 css 来自 css/ 文件夹中的 .css 文件，则需要将 ../ 添加到文件路径中，例如：

@font-face {
    font-family: league_spartanregular;
    src: url('../leaguespartan-bold-webfont.eot');
    src: url('../leaguespartan-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../leaguespartan-bold-webfont.woff2') format('woff2'),
         url('../leaguespartan-bold-webfont.ttf') format('truetype'),
         url('../leaguespartan-bold-webfont.svg#league_spartanregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

否则，如果您在浏览器中打开检查器，您应该能够看到与其相关的错误，尝试（和失败）查找带有红色 404 消息的这些文件。

【讨论】：

【解决方案4】：

首先去 google.fonts 选择一种字体，你会发现两件事，一是标签中的链接，你把它放在你的 html 文件的标签中，第二件事是你在 css 文件中使用的 CSS 的字体系列 here is google font links

【讨论】：