在 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、<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">，只需使用以下代码即可。

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

看起来像这样。

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

Answer 1

也许这会奏效（在无法 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 版本的行。

Answer 2

确保 link 来源 url 正确。尝试

 @font-face {

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

}

基本就够了，接下来要用... .logo 容器 {

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

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

在 css 中使用 ttf 文件

Using a ttf file in css

html

css

fonts

webfonts

font-face