Question

我试图让Titillium-Wen（谷歌字体）在所有的broswers上工作。我更喜欢自行托管字体文件。

以下代码适用于Edge，Safari和Chrome，但不适用于IE 11.文本以备用字体显示，就像IE 11找不到字体一样：

@font-face {
  font-family: 'Titillium Web';
  src: url('/fonts/titillium/TitilliumWeb-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Titillium Web';
  src: url('/fonts/titillium/TitilliumWeb-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Titillium Web';
  src: url('/fonts/titillium/TitilliumWeb-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Titillium Web';
  src: url('/fonts/titillium/TitilliumWeb-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

以下代码适用于IE 11，但在Chrome中不提供粗体和斜体字体。无论如何，我更喜欢自己托管字体：

@import url(https://fonts.googleapis.com/css?family=Titillium+Web);

我可以将@font-face代码用于IE 11吗？

Answer 1

尝试使用不同的字体格式，因为并非所有浏览器都支持TTF。

@font-face{
    font-family:'My Font';
    src:url('../fonts/myfont.woff2') format('woff2'),
        url('../fonts/myfont.woff') format('woff'),
        url('../fonts/myfont.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
}

有些Web服务会将字体转换为不同的文件格式。就我而言，使用WOFF2，WOFF和TT涵盖了我需要支持的所有浏览器版本。

@ font-face无法在IE 11上运行。@ import在Chrome中运行不佳。为什么？

1 个答案: