css - Firefox 不在一个网站中加载我的字体，而是在另一个网站中加载我的字体，而 Chrome 在两个网站中都加载

Question

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

我们有一个使用 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 和字体文件从原始元素复制到新元素。现在，在这个新元素中，webfont 可以在 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 一样。

有人知道原因吗？

Answer 1

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

<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”它应用了一些安全过滤器，避免访问字体文件。