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

Posted 2023-03-06

【中文标题】网站上的嵌入字体不会在 IE 或 Chrome 中显示

【英文标题】：embedded font on website won't display in IE or Chrome

【发布时间】：2013-05-09 10:31:19

【问题描述】：

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

我是否做错了什么或遗漏了一些东西以使其与其他浏览器一起使用？

谢谢

【问题讨论】：

更新了代码。现在只有 Chrome 有问题

【参考方案1】：

要为 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;

【参考方案2】：

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

【讨论】：

谢谢我阅读了另一个人的问题并遇到了字体松鼠。我已经更新了我的代码以包含转换后的字体……但 Chrome 仍然存在问题。

Chrome 中还没有显示吗？请问您使用的是什么字体（如.ttf、.svg、.eot 等）？

已修复！我必须将 woff 的 MIME 类型添加到 IIS

@ReeceDodds 我正要说你见过this question! 呵呵，很高兴听到:)。