在 CSS 中添加自定义字体

Question

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

感谢大家的帮助，解决了这个问题！ :)

my directory and css code below

    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;
}

Answer 1

将字体保存在 /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;
}

Answer 2

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

我在这里也有点陌生，如果我的回答不令人满意，我深表歉意。干杯:)

Answer 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 消息查找这些文件。

Answer 4

首先转到 google.fonts select 一种字体，在那里你会发现两件事，一个是 link 在你放在 html 文件标签中的标签中，第二个事情是你在 css 文件中使用的 CSS 的字体系列 here is google font links

在 CSS 中添加自定义字体

Adding custom fonts in CSS

html

css

fonts

font-face

webfonts