Question

我正在使用以下代码在我的ASP.NET网站中显示自定义字体：

<style type="text/css">
@font-face {
    font-family: 'B Mitra';
    src: url('BMitra.ttf') format('truetype'); /* IE9 Compat Modes */
    src: url('BMitra.ttf?#iefix') format('truetype'), /* IE6-IE8 */
         url('BMitra.ttf') format('truetype'), /* Modern Browsers */
         url('BMitra.ttf')  format('truetype'); /* Safari, Android, iOS */
    }
    </style>
</head>


<body style="font-family:B Mitra;" onload="pageLoad()">

它在FireFox中工作正常，但IE和Chrome不显示我的自定义字体（这个自定义字体位于我的服务器中，在包含我的ASPX文件的文件夹中，字体在没有它的系统上下载在Firefox中，但我认为IE和Chrome无法下载它并使用另一种现有字体）。这里出了什么问题？

Answer 1

http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

为什么你一遍又一遍地调用相同的格式（'truetype'）？在其旁边的评论不会修复现代浏览器。我想你还需要其他文件格式吗？也就是说，通常是：

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

@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.svg') format('svg');

}
}

Answer 2

＆lt; IE9支持EOT，而不是TTF，而且你的代码太多了。如果您想支持旧版本的IE，请使用http://reisio.com/examples/webfonts/，如果不支持，请使用仅一个WOFF的引用。

font-face在IE＆amp;铬

2 个答案: