Lato细线光不能在firefox中渲染

Question

但它在chrome中是这样的！

CSS：

h3
        {
            font-family: 'Lato Hairline Light';
            font-size: 20px;
            text-align: center;
            opacity: 0;
            color: lime;
            animation-fill-mode: forwards;
            animation-name: fadeIn;
            animation-timing-function: ease-in;
            animation-duration: 1s;
            animation-delay: 1s;
        }

在Chrome中渲染效果很好：

​

但在Firefox中呈现为默认字体：

这只发生在“轻”版本的Lato发际线上。如果我只使用"Lato“或"Lato Hairline"，它在两个浏览器上都能很好地渲染。

为什么会发生这种情况?我如何修复它？

编辑:已添加

@font-face {
             font-family: 'Lato Hairline';
             src: url('LATO-HAIRLINE.TTF') format('truetype');
         }

EDIT2:字体粗细设置为normal的"Lato Hairline“与"Lato Hairline”不同。

这里是"Lato细微发际线轻“+粗体：

这里是"Lato的发际线“+粗体：

以下是"Lato的发际线“的正常情况：

这里是"Lato“+ Light：

第一个是用chrome显示的，也是我想要显示的那个。

Answer 1

我相信这是因为因为它是一个H3，火狐应用了一种人工的“粗体效果”，而且由于它不能正确地呈现它，它可能会弄乱字体。您正在从Google字体加载字体吗？如果是这样的话，使用与之相关的字体粗细通常更好。如果您将fontface与下载到您自己的服务器上的字体一起使用，则应该只创建一个字体系列，并创建与您的字体相关的字体权重值。i.e

  @font-face {
      font-family: 'DroidSerif';
      src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
   }
 @font-face {
     font-family: 'DroidSerif';
     src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
     font-weight: normal;
     font-style: italic;
  }
 @font-face {
     font-family: 'DroidSerif';
     src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
     font-weight: bold;
     font-style: normal;
 }
 @font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
 }

来自本教程：http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

与浏览器相比，它更简单、更安全。通常，chrome理解的东西比它应该理解的要多，而firefox正在将现实带回你的面前。

如果是fontface，你能告诉我们你是如何将它们包含到你的网站上的吗？这也可能是文件不被Firefox接受的问题

如果是google字体，就这么做：

将其添加到您的head部分

   <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>

然后，您只需执行以下操作：

    .lato-thin{
        font-family: 'Lato', sans-serif;
        font-weight: 100;
     }

请查看此页面以了解更多信息：https://www.google.com/fonts#QuickUsePlace:quickUse

这是一个JS小提琴，小提琴中的javascript做的事情和在你的CSS中粘贴链接是一样的。在火狐上测试了它，它在https://jsfiddle.net/3db60oh7/上工作得很好