Question

我在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”的文件夹中的主题目录中。

我做错了什么或者错过了与其他浏览器合作的东西吗？

由于

Answer 1

Internet Explorer 9及更低版本在显示.TTF个文件时出现一些问题。它不支持通过CSS3方案的嵌入字体，而无需先转换为支持的格式（.svg，.ttf，.eot等）。但是，您可以tweak your @Font-Face Syntax to support this。

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

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

<强> TLDR;需要一个全面的@ font-face类型列表

更多信息：

SO Question - IE problems with True Type Font files

SO Question - Font-Face problem in Chrome

Further Hardening of the Bulletproof Syntax - Fontspring

Bulletproof @font-face syntax - Paul Irish

Answer 2

要将字体用于HTML元素，我们需要使用许多现代浏览器支持的CSS3的强大功能的@ font-face规则。 CSS属性font-family of HTML用于定义我们要嵌入的字体名称ans 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;
}

网站上的嵌入字体不会显示在IE或Chrome中

2 个答案: