相关疑难解决方法(0)

摘要

我在IE 7,8,9中通过HTTPS使用@ font-face遇到了一个问题 - 它根本就没有加载.包含HTML页面是否托管在HTTPS上并不重要,当我尝试通过HTTP加载EOT字体时,它不起作用.有没有人见过这种行为？

托管该字体的服务器正在发送正确的content-type ="application/vnd.ms-fontobject"

我尝试了多种字体,因此它并不特定于字体.

字体是在Font Squirrel上生成的

CSS语法

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

样本页面

http://gregnettles.net/dev/font-face-test.html

我们使用icomoon作为我们的图标字体,它们在Chrome和Firefox中运行良好,但不会在IE11中显示......有时候.它似乎适用于第一页加载,但不适用于后续页面加载.清除缓存似乎没有重置它.这个问题可能出现在其他IE版本中,现在我们只关注IE11.

这是我们的@ font-face:

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

[class^="icon-"], [class*=" icon-"] {
font-family: 'icon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-alphabet:before {
content: "\e600";
}
/* etc etc etc */

但这里变得奇怪.查看开发人员工具,正在发送字体的HTTP请求,但只接收了几百个字节(可能只是标题).

但HTTP响应正确地将内容长度列为几千字节.

"响应正文"选项卡只显示"无数据可查看".

您可以在网络面板屏幕截图中看到Google字体的行为不是这样的.

在位置栏中粘贴URL会导致下载完整文件.

EDIT 23-06-2012 10:24 (CET):找到答案

看看最底层的答案.这就是为我解决问题的原因.IE9正在以正确的方式呈现.IE8有一个略有不同的字体.不确定是什么字体,但看起来"OK".

Original Question:

我已经在这几个小时里苦苦挣扎了.对于我们的一个客户,我们设计了一个网店,并通过一个非正常的http连接进行开发.从2天前开始,我们在域上安装了SSL证书,并强制每个与网站的连接使用.htaccess覆盖https域

但是,出于某种原因,IE(没有版本)使用@ Font-Face渲染我们在CSS中指定的字体.以下是我们用于字体的代码:

@font-face {
    font-family: 'ProximaNovaLight';
    src: url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.eot');
    src: url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.woff') format('woff'),
         url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.ttf') format('truetype'),
         url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.svg#ProximaNovaLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

正如您所看到的,我正在使用包括https在内的字体的完整链接.我已经尝试将文件移动到域的根目录以匹配SSL证书域.我也尝试使用CSS中的相对路径,但这也没有用.

所有字体都在域中,它们都不是跨域的.

我在这里发现了另外两篇文章,描述了类似的问题,其中一个没有解决,另一个是,但它似乎不是同一个问题.在这种情况下,问题的作者必须将Access-Control-Allow-Origin标头添加到woff/ttf/otf/svg的文件请求中.我还将这些标题添加到我的.htaccess中以确保:

<FilesMatch "\.(woff|ttf|otf|svg)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

我有点用尽了选项.我不是服务器配置类型的人,但更多的是PHP/MySQL/jQuery所以我想我的想法与SO上的其他人相比相当有限.

如果有人有一个值得尝试的选项,请告诉我!

UPDATE 22-06-2012:

如果我将https更改为http并刷新IE中的页面,系统会提示我有非安全内容的消息,我可以选择接受此内容.如果我选择'是'我的内容正在加载...字体可用!Yay ..但是..如果我将其改回https,字体会再次消失.

不知道我可以从中学到什么(笑),但也许这给了一个小小的想法..

UPDATE 22-06-2012 #2:

到目前为止,我尝试过:

URL( '//协议/相对/ font.eot'); URL( '../文件/相对/ font.eot'); URL( '/域/相对/ font.eot'); URL( 'HTTPS://www.secure.tld/font.eot'); URL( 'HTTP://www.normal.tld/font.eot'); (可以使用弹出窗口"在IE中包含非安全项目)

我还尝试创建一个重写文件,强制将FilesMatch(woff,ttf,otf,eot,svg)转换为http://连接.这没有像我想象的那样起作用,我也没有任何线索,它做了什么......

我还补充说:

AddType application/vnd.ms-fontobject .eot
AddType font/truetype .ttf
AddType …