@font-face 不工作 3答案

【问题标题】：@font-face not working 3@font-face 不工作 3
【发布时间】：2017-09-05 07:59:11
【问题描述】：

我正在尝试在测试页面上使用 ttf 字体，我已将其转换为 woff 和 woff2，但浏览器不使用该字体（我已尝试使用 Opera、Chrome、Vivaldi、Firefox 和 Edge )。这是我的代码：

@font-face {
font-family: 'RM Typerighter old Regular';
src: url('/fonts/RM_Typerighter_old_Regular.woff2') format('woff2');
src: url('/fonts/RM_Typerighter_old_Regular.woff') format('woff');
src: url('/fonts/RM_Typerighter_old_Regular.ttf') format('truetype');
}

【问题讨论】：

问题可能在不同的级别 - 向我们展示代码或 URL 与实现。

标签： html css fonts font-face

【解决方案1】：

您需要将所有字体文件放在一个 src 中，并用逗号分隔，如下所示：

@font-face {
    font-family: "RM Typerighter old Regular";
    src: url("/fonts/RM_Typerighter_old_Regular.eot?") format("eot"),
         url("/fonts/RM_Typerighter_old_Regular.woff") format("woff"),
         url("/fonts/RM_Typerighter_old_Regular.ttf") format("truetype");
}

【讨论】：

【解决方案2】：

这可能是因为你没有使用相对路径试试这个：

@font-face {
  font-family: 'RM Typerighter old Regular';
  src: url('./fonts/RM_Typerighter_old_Regular.woff2') format('woff2'),
       url('./fonts/RM_Typerighter_old_Regular.woff') format('woff'),
       url('./fonts/RM_Typerighter_old_Regular.ttf') format('truetype');
}

【讨论】：