Css @字体在IE 11上不起作用@导入在Chrome中不起作用。为什么？

我正试图让Ticillium Wen，一种谷歌字体，在所有broswers上工作。我更喜欢自托管字体文件

下面的代码在Edge、Safari和Chrome上运行良好，但在IE11上不起作用。文本以备份字体显示，就好像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);

---

我可以在IE 11上使用

@font-face

代码吗？

尝试使用不同的字体格式，因为并非所有浏览器都支持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涵盖了我需要支持的所有浏览器版本。

尝试使用不同的字体格式，因为并非所有浏览器都支持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涵盖了我需要支持的所有浏览器版本。

可能重复的