1

我一直在尝试安装一种字体并在我的 CSS 中使用它，但没有成功。我想弄清楚我哪里出错了。我将 .tff 文件上传到与 CSS 文件相同的文件夹中，并以适当的方式添加到更新后的我的 css 文件中。

这是我在css中的副本：

    @font-face
    {
   font-family: ImpactLabel;
   src: url('ImpactLabel.tff');
    }
    p.change
    {
   font-family:ImpactLabel;
   color: #A70C1E;
   font-size:3em;   
    }

这是我的html文件：

<p class="change">Text</p>
4

3 回答 3

4

检查这个-> 

@font-face {
  font-family: ImpactLabel;
  src: url('ImpactLabel.ttf'), <-- Check if the path is correct (ttf not tff)
       url('ImpactLabel.eot'); /* IE9 */
}

然后打电话给你的班级：

.change {
  font-family: 'ImpactLabel';
}
于 2013-09-19T18:30:04.490 回答
0

试试这个http://www.fontsquirrel.com/tools/webfont-generator

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

}
    p.change{ 
        font-family: "primelight", Verdana, Tahoma;
    }

在您的网站中创建一个存储库：fonts/prime/

把主要文件放在里面，确保你有这样的东西：PrimeLight.otf

在这里阅读更多我的网站需要 Prime 字体

于 2013-09-19T18:29:40.550 回答
0

将其上传到FontSquirrel Webfont Generator并使用它为您提供的代码和文件。问题解决了！

FontSquirrel 将生成几种不同格式的字体，这些字体由不同的浏览器和设备选择性地加载（从而为您提供最广泛的兼容性）。

编辑：显然这个字体实际上已经在 FontSquirrel 上，所以你需要做的就是点击这里并从他们那里下载 webfont 工具包。

于 2013-09-19T18:30:04.817 回答