真棒字体:表情符号在我的计算机上看起来与实际网页上有所不同 [英] Font-awesome: An emoticon looks different on my computer than on the actual webpage

查看:137
本文介绍了真棒字体:表情符号在我的计算机上看起来与实际网页上有所不同的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正尝试在我的网页上添加 academicons 的ResearchGate表情符号,它是字体的扩展-惊人的.表情符号如下所示:

I am trying to add on my webpage the ResearchGate emoticon from academicons which is an extension to font-awesome. Here is what the emoticon should look like:

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

It works fine when I open my index.html on my computer (user/name/path/to/index.html) but it doesn't work when I open my webpage (www.blabla.bla.bl). Of course, I made really sure to copy (scp) my whole directory (including, images, css, etc..) over the server several times. I made it several times and have now waited 10 hours but the display is still incorrect. The display depends of what web browser I use to watch the webpage. Safari and GoogleChrome display and Firefox displays . Note that other font-awesome icons work fine.

这是index.html中的代码

Here is the code in index.html

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

这段代码被包装在ul和类social-iconsdiv

This piece of code is wrapped in ul and in a div of class 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;
}

我不太了解字体真棒和学术作品的工作原理,但这是Academicons.css中的代码

I don't quite understand how font-awesome and academicons work but here is the code in academicons.css

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

您是否知道可能导致这种行为的原因?

Do you have any idea of what might be causing this behaviour?

修改

    <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文件上.

The links to the font files are on the .css files.

在font-awesome.css上

On the font-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上

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

推荐答案

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

The most likely scenario is that your web server is not configured to serve the MIME types used by most modern web fonts. As such, and since you likely cannot reconfigure the server itself, you'll need to add some server directives per project.

对于IIS,请在您的web.config中使用此答案中的指令:

For IIS, use the directives from this answer in your web.config:

<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部分中找到(或需要添加到该部分).

The staticContent section will be found within (or need to be added to) the system.web section.

对于Apache,将这些指令添加到您的.htaccess文件中:

For Apache, add these directives to your .htaccess file:

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

这篇关于真棒字体:表情符号在我的计算机上看起来与实际网页上有所不同的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆