Question

我有2个字体文件：Gotham-Book.ttf和HelveticaNeue-Thin.otf。 Helvetica工作正常，但Gotham没有。

@font-face {
   font-family: 'HelveticaNeue-Thin';
   src:asset-url('HelveticaNeue-Thin.otf');
   src:font-url('HelveticaNeue-Thin.otf');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'Gotham-Book';
   src:asset-url('Gotham-Book.ttf');
   src:font-url('Gotham-Book.ttf');
   font-weight: normal;
   font-style: normal;
}

body
{
    font-family: 'Gotham-Book', 'HelveticaNeue-Thin';
    font-size: 200%;
}

两个文件都在同一个文件夹中。

Answer 1

这应该有效！这就是我总是在CSS3中声明我的字体的方式。

@font-face {
    font-family: "FontName";
    src: url(FontName.extension);
}

如果它们位于您的根文件夹中。如果它存在于另一个文件夹中，它将是：

@font-face {
    font-family: "FontName";
    src: url(/folder/FontName.extension);
}

Answer 2

如果这是针对网络的，可以提出一些建议：

@font-face {
   font-family: 'Helvetica Neue';
   src: url('HelveticaNeue-Thin.otf') format('opentype');
}

需要注意两件事：src需要网址，他们使用url(...)，而不是font-url或asset-url，理想情况下，格式指示符可以明确表示您知道你要加载什么。此外，如果它们正常，则无需提及重量和样式，因为这些是默认值。

@font-face {
  font-family: 'Gotham Book';
  src: url('Gotham-Book.ttf') format('truetype');
}

同样，格式提示很好。最后：

body
{
  font-family: 'Gotham Book', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 200%;
}

有一个字体堆栈，所以你的内容有合理的后备，万一出错了。如果没有这样的堆栈，你可能最终会遇到Times / Times New Roman的字体资源故障，这甚至都不是无衬线字体。它看起来比使用＆＃34;错误＆＃34;更糟糕。但仍然是sans-serif序列的后备。

在设计说明中，你做了一件奇怪的事情：Gotham Book比Helvetica Neue Thin更加，所以假装一个＆＃34; Thin＆＃34; font实际上是font-weight＆＃34; normal＆＃34;和Gotham Book完全可以互换是很好奇的。说这个更有意义：

@font-face {
   font-family: 'Helvetica Neue';
   src: url('HelveticaNeue-Regular.otf') format('opentype');
   font-weight: 400;
}

@font-face {
   font-family: 'Helvetica Neue';
   src: url('HelveticaNeue-Thin.otf') format('opentype');
   font-weight: 300;
}

然后明确你的实际样式中的font-weight：

h1 {
  font-family: 'Gotham Book';
}
p {
  font-family: 'Helvetica Neue';
  font-weight: 400; /* will use ...-Regular source */
}
p.thin {
  font-weight: 300; /* will use ...-Thin source */
}

最后，如果您想支持大多数浏览器，请不要使用ttf / otf源，但要将它们转换为WOFF。它更像是一个＆＃34;包装＆＃34;而不是转换，但它极大地增加了平台支持。

Answer 3

如果您使用的是font-url()或asset-url()，请确保css文件的扩展名为.css.scss，如果您在使用Rails之前需要进行处理。

css中有2个字体文件，一个可以正常工作，但另一个不可用

3 个答案: