@font-face 不适用于 chrome 但适用于其他浏览器

Question

我想要一件简单的事情...我的字体可以在 chrome 上工作。

@font-face{
    font-family: "Iosevka";
    src: url("http://www.some_url/iosevka-regular.woff2") format(woff2),
         url('http://www.some_url/iosevka-regular.otf') format(opentype),
         url('http://www.some_url/iosevka-regular.ttf') format(truetype);
         url('http://www.some_url/iosevka-regular.eot) format(embedded-opentype);
}

这适用于 Safari 和 Firefox，但不适用于 chrome。我不太清楚为什么

我看过几篇帖子说我需要添加更多字体支持，所以我有 ttf、woff2、eot 和 otf，但这仍然不起作用。

有人知道这是怎么回事吗？

Answer 1

目前支持的最简单的网络字体加载。只需要一个字体文件就可以使用

两个 CSS 规则和一个 HTML 标签。

Microsoft 是 TTF 的反对者，尽管他们参与了 TTF 的构建。所有系统都有使用 TTF 的许可，并且 caniuse 报告所有支持它的浏览器。

请注意，这并不意味着您可以使用任何授权字体。表示可以使用TTF来显示字体

OTF 是开放许可证，因此不需要许可证，所有系统（包括 Microsoft edge）都支持它。

不确定 Chrome 不支持 Woff 和 SVG 的状态。

@font-face {
  font-family: "Logo";
  src: url("/fonts/logo.ttf"); /* or url("/fonts/logo.otf") */
  }
.logo {
  font-family: Logo;
  font-size: 80px;
  font-weight: normal;
  }

<h1 class="logo">

浏览器在需要使用字体之前不会下载字体。但如果不喜欢正常行为，可以使用 Javascript 下载字体。

@font-face 不适用于 chrome 但适用于其他浏览器

@font-face not working on chrome but works on other browsers

html

css

google-chrome