css - Lato Hairline Light 无法在 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 Hairline 的“Light”版本中。如果我只使用“Lato”或“Lato Hairline”，它在两种浏览器中都能正常呈现。

为什么会发生这种情况，我该如何解决？

编辑:添加

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

EDIT2:字体粗细设置为正常的“Lato Hairline”与“Lato Hairline Light”不同。
这是“Lato Hairline Light”+ 粗体:
这是“Lato Hairline”+粗体:
这是正常的“Lato Hairline”:
这是“Lato”+ Light:
第一个是在 chrome 中显示的，也是我要显示的。

Answer 1

我相信这是因为它是 H3，firefox 正在应用人为的“粗体效果”，并且由于它无法正确呈现它，它可能会弄乱字体。你是从谷歌字体加载字体吗？如果是这样，通常最好使用与之关联的字体粗细。如果您将 fontface 与在您自己的服务器上下载的字体一起使用，则应仅创建 1 个字体系列并创建与您的字体相关的字体粗细值。即

  @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 将现实带回到你的脸上 eheh

如果是 fontface，您能告诉我们您是如何将它们添加到您的网站中的吗？也可能是文件不被 Firefox 接受的问题

如果它是谷歌字体，就这样做:

将此添加到您的 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 fiddle，fiddle 中的 javascript 与将链接粘贴到 CSS 中的作用相同。在 firefox 上测试它，它完美地工作 https://jsfiddle.net/3db60oh7/