0

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

我设置了一个有效的@font-face，但是当我在@font-face 中设置字体粗细时，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;
}
4

1 回答 1

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');
    }
于 2013-02-11T20:20:33.767 回答