网站上嵌入的字体将不会显示在IE或Chrome中
我在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;
字体存储在名为“字体”的文件夹中的主题目录中。
我是否做错了什么或错过了什么可以与其他浏览器一起使用？
谢谢
Internet Explorer 9及更低版本有一些显示.TTF文件的问题。 如果不先转换为支持的格式（ .svg ， .ttf ， .eot等），它不支持通过CSS3方案嵌入字体。 但是，您可以调整@ Font-Face语法来支持此操作。
由于Chrome没有显示正确的字体，这是由于不同的浏览器有不同的需求。 您可以在下面的更多信息中的第二个链接中找到更多信息。
还有一个附注：如果您的字体托管在Google字体上，则将链接嵌入到您的网站中，而不是自行托管。
TLDR; 需要@ font-face类型的全面列表
更多信息：
SO问题 - True Type字体文件的IE问题
SO问题 - Chrome中的Font-Face问题
防弹语法的进一步强化 - Fontspring。
Bulletproof @ font-face语法 - Paul Irish
为了使用HTML元素的字体，我们需要使用许多现代浏览器支持的CSS3的全部功能的@ font-face规则。 CSS属性字体系列HTML用于定义我们要嵌入的字体名称和用于定义要嵌入的字体路径的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;
}