字体很棒：表情符号在我的电脑上看起来与实际网页上的不同

Question

我想在我的网页上添加来自 academicons 的 ResearchGate 图释，它是 font-awesome 的扩展。表情符号应如下所示：

当我在我的电脑上打开我的 index.html 时它工作正常 (user/name/path/to/index.html) 但当我打开我的网页时它不起作用 (www.blabla.bla.bl)。当然，我确实确保在服务器上多次复制 (scp) 我的整个目录（包括图像、css 等）。我做了好几次，现在已经等了 10 个小时，但显示仍然不正确。显示取决于我用来观看网页的网络浏览器。 Safari 和 GoogleChrome 显示，Firefox 显示。请注意，其他超棒的字体图标也可以正常工作。

这是index.html

中的代码

<li>
  <a href="https://www.researchgate.net/profile/MyName">
     <i class="ai ai-researchgate"></i>
  </a>
</li>

这段代码包裹在ul和class的div中social-icons

这是我的 style.css

.social-icons {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /*background: #202020;
    border-top: 1px solid #1A1A1A;*/
    background: #2b2b2b;
    width: 250px;
    z-index: 2;
    height: 45px;
}

.social-icons ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.social-icons li {
    float: left;
    width: 33%;
    padding: 10px;
    text-align: center;
}

我不太明白 font-awesome 和 academicons 是如何工作的，但这是 academicons.css

中的代码

.ai-researchgate:before {
    content: "\e602";
}

您是否知道可能导致此行为的原因？

编辑

    <link rel="stylesheet" href="css/academicons.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">  
    <link rel="stylesheet" href="css/perfect-scrollbar-0.4.5.min.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/style.css">
    <link id="theme-style" rel="stylesheet" href="css/styles/default.css">

字体文件的链接在 .css 文件中。

关于字体-awesome.css

@font-face{font-family:'FontAwesome';src:url('font/fontawesome-webfont.eot?v=3.2.1');src:url('font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),url('font/fontawesome-webfont.woff?v=3.2.1') format('woff'),url('font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),url('font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');font-weight:normal;font-style:normal;}[class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;}

在 academicons.css

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

Answer 1

最有可能的情况是您的网络服务器未配置为提供大多数现代网络字体使用的 MIME 类型。因此，由于您可能无法重新配置服务器本身，因此您需要为每个项目添加一些服务器指令。

对于 IIS，请在 web.config 中使用 this answer 中的指令：

<staticContent>
   <remove fileExtension=".woff" />
   <remove fileExtension=".eot" />
   <remove fileExtension=".ttf" />
   <remove fileExtension=".svg" />
   <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
   <mimeMap fileExtension=".ttf" mimeType="application/font-sfnt" />
   <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
   <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
</staticContent>

staticContent 部分将位于（或需要添加到）system.web 部分。

对于 Apache，将 these directives 添加到您的 .htaccess 文件：

AddType application/vnd.ms-fontobject    .eot
AddType application/x-font-opentype      .otf
AddType image/svg+xml                    .svg
AddType application/x-font-ttf           .ttf
AddType application/font-woff            .woff

字体很棒：表情符号在我的电脑上看起来与实际网页上的不同

Font-awesome: An emoticon looks different on my computer than on the actual webpage

html

css

font-awesome

emoticons