@font-face 字体替换以跨浏览器工作答案

【问题标题】：@font-face font replacement to work crossbrowser@font-face 字体替换以跨浏览器工作
【发布时间】：2013-03-22 16:29:39
【问题描述】：

我无法让这个@font-face 字体替换跨浏览器工作，你能帮忙吗？它可以在除 ie 9 之外的所有版本中运行，也可以在除 ie 7 和 ie 8 之外的所有版本中运行。

我的字体是 .eot .otf .svg 。 ttf .woff?

谢谢

    /* works in all but ie 9 */
    @font-face {
        font-family: 'Deutsch';
        src: url('/fonts/Deutsch.eot');
        src: local('/fonts/Deutsch'), 
             url('/fonts/Deutsch.ttf') format('truetype'),
             url('/fonts/Deutsch.svg#font') format('svg'); 
    }
     /*from [http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/][1] */


    /* works in all but ie 7 and ie 8 */
    @font-face {
        font-family: 'Deutsch';
        src: url('/fonts/Deutsch.ttf'),
             url('/fonts/Deutsch.eot'); /* IE9+ */
    }
    /*from [http://w3schools.com/css3/css3_fonts.asp][2]*/

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <style type="text/css">



       /* code place holder location for css */



        #test
        {
            font-family:'Deutsch';
            font-weight:bold;
            text-decoration:underline;
            font-style:italic;
            font-size:30px;
        }

    </style>




</head>
<body>

    <div id="test">text goes here</div>

</body>
</html>

【问题讨论】：

更改您的文档类型........在您的 html xmlns="w3.org/1999/xhtml" 中删除此行
检查此链接.. reference.sitepoint.com/css/at-fontface 它显示字体的兼容性
谢谢，但它不是跨浏览器——我刚刚测试过
@font-face 应该适用于所有主流浏览器，包括旧版本的 IE（7 或 8）。我认为问题可能是在 DOCTYPE 声明之前声明 styles。将您的font-face 放入style 标记中的head 部分。

标签： css

【解决方案1】：

首先像下面这样重写你的字体系列，

font-family: 'Deutsch', sans-serif;

如果不是这样，您必须为此使用网站，它会将您的 ttf 格式转换为其他不同的字体格式...

检查一下，http://www.fontsquirrel.com/fontface/generator

【讨论】：

【解决方案2】：

我只是想分享这个，因为这似乎有效。

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

松鼠把这个放出来

@font-face {
    font-family: 'deutsch_gothicnormal';
    src: url('deutsch_-_copy.eot');
    src: url('deutsch_-_copy.eot?#iefix') format('embedded-opentype'),
         url('deutsch_-_copy.woff') format('woff'),
         url('deutsch_-_copy.ttf') format('truetype'),
         url('deutsch_-_copy.svg#deutsch_gothicnormal') format('svg');
    font-weight: normal;
    font-style: normal;

}

【讨论】：