在 css 中使用 ttf 文件

Question

据我所知，在这种情况下，要使用本地存储的自定义字体，您将使用与此类似的字体。

@font-face {
    font-family: 'theFontFamily';
    src local('the font'),
        local('the-font'),
        url(path/to/the-font);
}

.fontClass {
    font-family: 'theFontFamily', extra_settings;
}

那么在本地使用这个font，你会期望它工作吗？

@font-face {
  font-family: 'Pacifico';
  src: local('Pacifico Regular'),
       local('Pacifico-Regular'),
       url(resources/fonts/Pacifico.ttf);
}

.logo-container {
  font-family: 'Pacifico', cursive;
}

当我尝试它时，代码会更改字体，而不是更改为所需的字体。看起来像这样。

而如果我使用导入链接 <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">，则只需使用以下代码即可。

.logo-container {
  font-family: 'Pacifico', cursive;
}

看起来像这样。

我可能犯了一个简单的错误，如果有人能帮助我解决这个问题，我将不胜感激。

Answer 1

确保正确链接源网址。试试

 @font-face {

   font-family: 'myPacifico' ;
   src: url('/resources/fonts/Placifico.ttf') format('truetype');

}

这已经足够基本了，然后使用... .logo 容器 {

     font-family: 'myPacifico', san-serif;      }

在这种情况下，San-serif 是一种后备。在这种情况下，我链接到常规 ttf 文件。对于粗体和其他样式，您必须在另一个具有不同名称的 @font-face 中链接到该样式。

Answer 2

也许这会起作用（很难确定，但不能 100% 测试）：

@font-face {
  font-family: 'Pacifico';
  src: url('Pacifico-Regular.eot');
  src: url('Pacifico-Regular.eot?#iefix')
       url('Pacifico-Regular.woff2') format('woff2'),
       url('Pacifico-Regular.woff') format('woff'),
       url('Pacifico-Regular.ttf')  format('truetype'),
       url('Pacifico-Regular.svg#svgFontName') format('svg');
}

仅在本地使用 TrueType 字体：

@font-face {
  font-family: 'Pacifico';
  src: url('Pacifico-Regular.ttf');
}

请记住，为了获得最高级别的浏览器兼容性，您不应该只使用 TrueType 字体，但如果只使用 TTF 进行测试，您可以删除任何不涉及 TTF 版本的行。