2

我在 jquery 弹出窗口上应用了字体。它适用于 Chrome 和 Firefox，但不适用于 IE 浏览器。

Font Face Code in css
----------------------

@font-face {
font-family: "pt-sans";
    src: url("https://www.example.com/font/PTS55F.eot");
    src: local("pt-sans"),
     url("https://www.example.com/font/PTS55F.woff") format("woff"),
     url("https://www.example.com/font/PTS55F.ttf") format("truetype"),
     url("https://www.example.com/font/PTS55F.svg") format("svg"); 
 }

Code added in .htaccess
----------------------

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

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

# END REQUIRED FOR WEBFONTS

通过添加上面的代码 Font-face 正在页面上工作，但是当我在弹出字体上尝试相同的时候不起作用。

请帮助我。

4

5 回答 5

6

那是旧的 IE 错误 ;)

Bulletproof @font-face 语法：

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

什么？我不明白。

使这项工作有效的技巧是?遵循 EOT 文件名。严重地的。

浏览器兼容性

Safari 5.03、IE 6-9、Firefox 3.6-4、Chrome 8、iOS 3.2-4.2、Android 2.2-2.3、Opera 11

编辑：好像你有麻烦了，我正在研究类似的问题，似乎 IE 不能使用在站点域之外托管的 @fontface 字体（如果页面位于http://www.mysite.com/page -字体也必须在http://www.mysite.com出于某种原因，将 EOT 文件放在您的域上，然后再试一次。

这个类似的问题也将有所帮助：

他们很少有可能解决问题的办法。祝你好运！

于 2013-02-06T09:18:34.393 回答
3

在 css 中试试这个字体代码：

@font-face{
font-family:'pt-sans';
src:url('https://www.mysite.com/font/PTS55F.eot'); // IE9 Compat Modes
src:url('https://www.mysite.com/font/PTS55F.eot?#iefix') format('embedded-opentype'), // IE6-IE8
url('https://www.mysite.com/font/PTS55F.woff') format('woff'), // Modern Browsers
url('https://www.mysite.com/font/PTS55F.ttf') format('truetype'), // Safari, Android, iOS
url('https://www.mysite.com/font/PTS55F.svg#pt-sans') format('svg');  // Legacy iOS
font-weight:normal;
font-style:normal
}

或者您可以将您的字体上传到：http ://www.fontsquirrel.com/fontface/generator并获取 font-face 套件和 css，这也适用于所有浏览器。

于 2013-02-06T09:22:45.677 回答
2

这是我使用的 hte 代码。但我从不需要任何 htaccess 代码。从来没有任何问题。

@font-face 
{    
    font-family: 'Robotothin';

    src: url('fonts/Roboto-Thin-webfont.eot');
    src: url('fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Thin-webfont.woff') format('woff'),
         url('fonts/Roboto-Thin-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Thin-webfont.svg#Robotothin') format('svg');

}
于 2013-02-06T09:04:48.090 回答
1

这是一个老问题，但是我觉得最好现在回答它，因为即使在应用了所有可能的解决方案之后，我也遇到了与 IE 相同的问题。我假设这里有问题的网站托管在本地服务器上，这本质上是 IE 的问题。我花了一段时间才意识到，但我注意到我的实时网站有工作字体，而我的本地版本没有。默认情况下，IE 通常会应用一个设置来在本地托管网站（Intranet）的浏览器中显示兼容性视图模式，这意味着某些样式可能无法按预期正常工作，而且导入的字体通常也不起作用。

要禁用此设置，请通过单击右上角的齿轮/齿轮图标进入 IE 菜单 > 兼容性视图设置，然后取消选中“在兼容性视图中显示 Intranet 站点。这应该可以解决未来访问者的问题，我我正在使用 IE11 并且这种情况仍然存在，因此未来几年可能会保持不变，因为 IE 现在也只有无限的标签。

于 2014-07-28T11:43:52.477 回答
0

归功于这个人/论坛： http ://www.experts-exchange.com/Web_Development/Blogs/WordPress/Q_28367854.html

我在使用 IE11时遇到了同样的问题，请在我的网站上使用字体 levenim。标题正确，一切都应如此。当我使用 CDN 或子域时，它不会加载，而在同一个域上时，它会完美加载。有什么问题？文件名。噗。

我使用“lvnm-webfont”作为文件基名，与字体名称不同。当它位于 CDN 或子域上时，它必须是 'levenim' 仅用于 IE。吃草对吗？我认为这与版权有关。

但是，当它是版权字体时，它会加载但从 CDN 或子域加载时不会使用，还有另一个问题。所以我对 IE 使用这个技巧只是为了加载字体（在 HTML 页面中）：

注意：字体必须存在于域和子域中，并且必须在任何其他 CSS 之后加载（仅限 IE）

<!--[if gte IE 7]]>
<style type="text/css">
@font-face {
    font-family: '__siteFont__';
    src: url('fonts/lvnm/lvnm-webfont.eot');
    src: local('☺'), url('fonts/lvnm/lvnm-webfont.woff') format('woff'), 
                     url('fonts/lvnm/lvnm-webfont.ttf') format('truetype'), 
                     url('fonts/lvnm/lvnm-webfont.svg#webfontTVnpYENL') format('svg');
    font-weight: normal;
    font-style: normal;
}
</style>
<![endif]-->

我可以做得更高效，因为我可以在模板和 CSS 中使用 IF 语句来避免额外的服务器查找（我的框架的一部分）。像这样的东西：

在 CSS 中：

/* #IF !$is_msie */
<load font from CDN>
/* #ENDIF */

在 HTML 中：

<!-- #IF $is_msie -->
<load font from domain>
<!-- #ENDIF -->

您也可以选择从您的域加载字体，但是当从子域提供 css 文件时，您不能这样做，您在 IE 中遇到了同样的问题。在这种情况下，您需要在 HTML（模板）中添加样式标记，如上面的示例，但没有 IE 的条件注释。

希望它有所帮助。

于 2014-12-04T22:04:16.613 回答