@font-face 不适用于 IE 11。@import 在 Chrome 中无法正常运行。为什么？答案

【问题标题】：@font-face is not working on IE 11. @import is not working well in Chrome. Why?@font-face 不适用于 IE 11。@import 在 Chrome 中无法正常运行。为什么？
【发布时间】：2016-11-09 18:03:32
【问题描述】：

我正在尝试让 Titillium-Wen（一种 Google 字体）适用于所有浏览器。我更喜欢自托管字体文件。

以下代码在 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 上运行吗？

【问题讨论】：

What is the status of TTF support in Internet Explorer?的可能重复

标签： css sass

【解决方案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;
}

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

【讨论】：