Question

很抱歉，如果发布多个问题是不正确的做法，但是：

我设置了@ font-face，但是当我在@ font-face中设置font-weight时，Firefox会显示我的默认字体，而不是我在@ font-face中定义的字体。 Chromium似乎甚至不能与@ font-face一起使用...... 并且，我认为由于我无法设置字体权重，因此字体（Lato Black）过于大胆。

这是我的HTML：

<!DOCTYPE HTML>
<html>

  <head>
    <meta charset = "utf-8">
    <title>Marco Scannadinari</title>
    <link href = "layout.css" type = "text/css" rel = "stylesheet">
  </head>

  <body>
    <div class = "centre">
      <div class = "lato-black">
        <h1>Marco Scannadinari</h1>
      </div>
      <div class = "cantarell">
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
  </body>

</html>

......还有我的CSS：

body {
  background: #cdcdcd;
  margin-top: 32px;
  margin-left: 512px;
  margin-right: 512px;
}

div.centre {
  text-align: center;
}

@font-face {
  font-family: "lato-black";
  src: url("fonts/Lato-Bla.ttf")
  format("truetype")
}

@font-face {
  font-family: "cantarell";
  src: local("fonts/Cantarell-Regular.otf")
  format("opentype")
}

div.cantarell {
  font-family: "cantarell";
}

div.lato-black {
  font-family: "lato-black";
  text-shadow: 0px 1px #ffffff;
}

Answer 1

您必须为不同的浏览器使用不同格式的字体。最后你应该有这样的东西：

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

我的@ font-face怎么了？

1 个答案: