1

我在 CSS 中为我​​正在构建的基于 wordpress 的网站设置了以下字体，字体在 FF 中显示良好，但在 IE（9）或 Chrome（最新）中完全没有。

  /* =Typography
  -------------------------------------------------------------- */
  @font-face {
      font-family: 'Humanist';
      src: url('fonts/humanist521lightbt-webfont.eot');
      src: url('fonts/humanist521lightbt-webfont.eot?#iefix') format('embedded-opentype'),
           url('fonts/humanist521lightbt-webfont.woff') format('woff'),
           url('fonts/Humanist521LightBT.ttf') format('truetype'),
           url('fonts/humanist521lightbt-webfont.svg#webfontregular') format('svg');
      font-weight: normal;
      font-style: normal;
  }

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

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

当我需要为元素使用字体时，我只需添加font-family: 'Humanist', Arial, sans-serif;

字体存储在名为“fonts”的文件夹中的主题目录中。

我是否做错了什么或遗漏了什么才能与其他浏览器一起使用？

谢谢

4

2 回答 2

3

Internet Explorer 9 及更低版本在显示.TTF文件时存在一些问题。它不支持通过 CSS3 方案嵌入字体，除非先转换为支持的格式（.svg、.ttf、.eot等）。然而，你可以调整你的 @Font-Face 语法来支持这个。

Chrome 没有显示正确的字体，这是由于不同的浏览器有不同的需求。您可以在下面的更多信息中的第二个链接中找到更多信息。

附带说明：如果您的字体托管在Google Fonts上，请将链接嵌入到您的网站中，而不是自己托管。

TLDR；需要一份完整的@font-face 类型列表

更多信息：

SO Question - True Type字体文件的IE问题

SO 问题 - Chrome 中的字体问题

Bulletproof 语法的进一步强化 - Fontspring。

Bulletproof @font-face 语法 - Paul Irish

于 2013-05-15T01:34:06.087 回答
0

要将字体用于 HTML 元素，那么我们需要使用许多现代浏览器支持的 CSS3 的强大功能的@font-face 规则。HTML 的 CSS 属性 font-family 用于定义我们要嵌入的字体名称和 src 属性用于定义要嵌入的字体的路径。

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

div,h2
{
    font-family:myfont;
}
于 2013-12-30T13:44:48.730 回答