Firefox 没有在一个网络中加载我的字体，但在另一个网络中加载，而 Chrome 在这两个网络中都加载答案

【问题标题】：Firefox not loading my font in one web but does in another web, while Chrome does in bothFirefox 没有在一个网络中加载我的字体，但在另一个网络中加载，而 Chrome 在这两个网络中都加载
【发布时间】：2013-08-29 10:30:48
【问题描述】：

我们的一种网络字体遇到了一个问题，在搜索和搜索之后，我们找不到原因。

我们有一个使用 JSP 开发的 Web 应用程序，它使用以下 CSS 加载字体：

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

当我们必须使用这个字体时，我们用：

.formlogin span.help-block a {
    color: #93B1CC !important;
    font-weight: normal;
    padding-left: 95px;
    font-size: 12px;
    font-family: 'MyFont';
    position: relative;;
    margin-top: -20px;
}

到目前为止一切正常（在每个浏览器中都可以正常加载）。

现在，我们正在开发另一个具有相同界面的网站。因此，我们已将 CSS 和字体文件从原始文件复制到新项目中。现在，在这个新项目中，网络字体在 Chrome 中正确显示，但在 Firefox 和 IE9 中没有。

我们尝试更改 about:config 中的 firefox 属性，但没有成功。

两个网站都使用同一个服务器，因此向服务器配置添加任何内容的解决方案无法解决任何问题。

我们已尝试将 url 更改为 /fonts/.. 和 /styles/fonts/... 和 styles/fonts/... 但也没有成功。

在firebug中，在网络部分，字体的URL似乎正确加载，因为它没有得到404。同样在firebug中，webfont显示为灰色（说它没有使用它，这很明显在网上看）。我们还尝试在调用 webfont 时添加一个 !important 子句，但仍然没有成功。

有什么帮助吗？谢谢！

更新

它必须与文件的路径相关。如果我直接用文件的字节设置字体，像这样：

@font-face {
    font-family: "MyFont";
    font-style: normal;
    font-weight: 300;
    src: url("data:font/opentype;base64,d09GRgABAAAAAFaoABEAAAAA....");
}

效果很好。现在，这不是一个解决方案，因为我应该根据浏览器更改文件，就像我在第一个字体配置中使用不同的 url 所做的那样。

有人知道原因吗？

【问题讨论】：

您说，“我们尝试将 url 更改为 /fonts/.. 和 /styles/fonts/... 和 styles/fonts/... 但它也没有用。 "，但你知道字体实际上在哪里吗？听起来你只是在猜测。
很抱歉给您这样的印象，但不，我们确切地知道它们在哪里。它们在 font/ 文件夹中，在 styles/ 文件夹中。 .css 文件位于 styles/ 文件夹内。我添加这个只是因为在其他答案中有人提到使用绝对网址，但这不起作用。

标签： css google-chrome firefox fonts

【解决方案1】：

终于找到问题了。我们使用的是 maven，两个项目的 pom.xml 略有不同。不用说这个微小的差异是原因：D。在这个文件中，我们有这个战争建筑的配置：

<plugin>
    <artifactId>maven-war-plugin</artifactId>
    <version>2.3</version>
    <configuration>
        <warName>${application.context.path}</warName>
        <filters>
            <file>${project.basedir}/conf/${currentEnvironment}.properties</file>
        </filters>
        <nonFilteredFileExtensions>
            <nonFilteredFileExtension>pdf</nonFilteredFileExtension>
        </nonFilteredFileExtensions>
        <packagingExcludes>WEB-INF/web.xml</packagingExcludes>
        <webResources>
            <resource>
                <directory>src/main/webapp</directory>
                <includes>
                    <include>**/*.jsp</include>
                    <include>**/*.tag</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>true</filtering>
            </resource>

            <resource>
                <directory>${project.basedir}/src/main/webapp/images</directory>
                <targetPath>images</targetPath>
                <filtering>true</filtering>
            </resource>
            <resource>
                <directory>${project.basedir}/src/main/webapp/scripts</directory>
                <targetPath>scripts</targetPath>
                <filtering>true</filtering>
            </resource>
            <resource>
                <directory>${project.basedir}/src/main/webapp/styles</directory>
                <targetPath>styles</targetPath>
                <filtering>true</filtering>
            </resource>
        </webResources>
    </configuration>
</plugin>

最后，将样式的过滤更改为“false”解决了问题，因为“true”应用了一些安全过滤器，避免访问字体文件。

【讨论】：