Question

但是它确实用于镀铬！

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中渲染得很好：
enter image description here

但是在Firefox中呈现为默认字体：
enter image description here
这只发生在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”+ Bold： enter image description here
这是“Lato Hairline”+ Bold：
这里的“Lato Hairline”正常：
这是“Lato”+ Light：
第一个是以chrome显示的那个和我想要显示的那个。

Answer 1

我相信这是因为因为它是H3，所以firefox正在应用人工的“Bold效果”，因为它无法正确渲染它，它可能会混淆字体。您是否从Google字体加载字体？如果是这样，通常最好使用与之关联的字体粗细。如果您使用字体与在您自己的服务器上下载的字体，您应该只创建1个font-family并创建相对于您的字体的font-weight值。即

  @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小提琴，小提琴中的javascript与粘贴CSS中的链接完全相同。在Firefox上测试它，它完美地工作https://jsfiddle.net/3db60oh7/

Lato Hairline Light无法在Firefox中呈现

1 个答案: