我的@font-face 有什么问题？答案

【问题标题】：Whats wrong with my @font-face?我的@font-face 有什么问题？
【发布时间】：2013-01-27 00:08:21
【问题描述】：

如果发布多个问题是不正确的做法，请见谅，但是：

我设置了一个有效的@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;
}

【问题讨论】：

在 Fedora 18 x86_64 上使用 apache
我认为您还需要woff 文件类型，您应该在@font-face too 中设置字体粗细。
尝试在这里生成你的字体：fontsquirrel.com/fontface/generator
@Jrod：但是当设置了 font-weight 时，浏览器出于某种原因默认为正常字体。
@zheoffec 您的字体粗细可能不匹配。您将字体粗细设置为什么值？如果您在 font-face 中将 font-weight 设置为 800，您还需要将类上的 font-weight 设置为相同才能看到字体。

标签： html css apache web lamp

【解决方案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');
    }

【讨论】：

也许你有一个默认的粗体？尝试找到类似“Lato-Black light”的内容