0

我正在为我的一个朋友做一个网站。他对页面上的字体非常具体。我从网上下载了一个自定义字体，但奇怪的是；它只在 Internet Explorer 中工作（真是个惊喜）。

这是我的代码：

@font-face
{
font-family: eurostile;
src: url(../font/eurostile.ttf);
} 
@font-face
{
font-family: eurostile;
src: url(../font/eurostile.eot);
}

这就是我如何称呼字体系列：

  p 
    {
        font-family: eurostile;
    }

等等...我做错了什么？

4

4 回答 4

3

您需要将其格式化为跨平台样式。看这里。

问题是不同的浏览器支持不同的字体样式。

在此处输入图像描述

就像是：

@font-face {
    font-family: 'fontMN';
    src: url('/fonts/font_font-webfont.eot'); /* IE9 Compat Modes */
    src: url('/fonts/font_font-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/font_font-webfont.woff') format('woff'), /* Modern Browsers */
         url('/fonts/font_font-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/fonts/font_font-webfont.svg#fontMN') format('svg'); /* Legacy iOS */
}

会工作。

您将需要获取对您希望支持的浏览器有效的格式，如上所示。

于 2013-06-21T22:34:06.923 回答
0

浏览器使用不同的格式。IE 使用 eot 格式，大多数使用 woff，但也有一些使用 svg 或 ttf/otf。

看一下这个：

http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

您可以通过将 ttf/otf 上传到 fontsquirrel 并使用它的转换器来创建所有这些字体：

http://www.fontsquirrel.com/tools/webfont-generator

于 2013-06-21T22:32:55.843 回答
0

http://jasonlau.biz/home/css/embedding-custom-fonts-with-css

如果您需要在您的网站中嵌入自定义字体，这部分 CSS 将完成任务。请按照以下步骤在您的网站中嵌入自定义字体。

于 2013-06-21T22:33:33.990 回答
0

使用此工具生成font-face规则 - http://www.fontsquirrel.com/tools/webfont-generator。

于 2013-06-21T22:34:39.030 回答