在css

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-container {

     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版本的行。