Question

在询问我的问题之前，我一直在查看搜索问答，但我没有找到任何答案。

对于我的项目，我必须建立一个网站，他们给了我一个文件夹＆＃34; fonts＆＃34;下载包含我需要的字体，我有2种字体，＆＃39; FontAwesome＆＃39;和＆＃39; glyphicons-halflings＆＃39;这是我为这些字体编写的代码：

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

@font-face 
{
    font-family: 'glyphicons-halflings-regular';
    src: url('fonts/glyphicons-halflings-regular.eot');
    src: url('fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/glyphicons-halflings-regular.woff') format('woff'),
         url('fonts/glyphicons-halflings-regular.ttf') format('truetype'),
         url('fonts/glyphicons-halflings-regular.svg#glyphicons-halflings-regular') format('svg');
         font-weight: normal;
         font-style: normal;
}

然后我尝试使用我的字体：

header h1
{
    font-family: 'FontAwesome';
}

当我尝试使用FontAwesome时，没有改变基本字体，我还尝试使用我的第二种字体＆＃39; glyphicons-halflings-regular＆＃39;使用这种字体，基本字体仍然存在，但我的单词like this之间的空间更大。

在这里＆＃39;我的字体文件夹screenshot，我的样式表在我的文件夹1-Projet中，所以通常没有问题的URL，我也尝试过有人使用这些字体谷歌链接，但它没有工作。

有谁知道问题的来源？

Answer 1

我会考虑在使用CDN

的库中包含font-awesome

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

然后添加自己的CSS类，例如.fa只有font-family：FontAwesome

.fa {
    font-family: FontAwesome;
 }

然后在你的元素上你可以添加你想要的特定图标的字体 - 真棒类，例如

<h1 class="fa fa-check fa tick"></h1>

以下是我们如何使用额外的CSS实现.fa类

但可能就像下面的

使用HTML代码显示字体真棒图标

== edit：简单字体真棒页面的示例HTML，下面的sopy并保存为.html文件，看看是否适合作为起点==

<!doctype html>
<!--[if lte IE 8]> <html lang="en" class="ie-lte8"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <style>
        .fa {
            font-family: "FontAwesome";
        }
        </style>
</head>
<body>
<h1 class="fa fa fa-check fa-tick">This is font awesome</h1>
</body>
</html>

Answer 2

谢谢你的回答，我在我的帖子上犯了一个错误，我说我和我的朋友使用谷歌链接，但这是我使用的这个引导链接，它仍然没有工作，我也尝试使用这个类，如你所说，它没有＆＃39;即使在我检查我的页面字体系列时，也可以工作：＆＃39; FontAwesome＆＃39 ;;出现了，我也试过font-family：FontAwesome正如你所说，以确定是否有没有奇迹大声笑，我也尝试在除了我的h1之外的其他地方使用该字体，但它仍然没有工作

编辑我尝试了你的HTML代码，我可以看到字体前面出现的图标，但似乎是字体still doesn't work

@ font-face AwesomeFont不起作用

2 个答案: