0

複数の問題を投稿するのが不適切な慣行である場合は申し訳ありませんが、次のとおりです。

@font-face を設定しましたが、@font-face 内で font-weight を設定すると、Firefox は @font-face で定義したフォントではなくデフォルトのフォントを表示します。Chromium はそもそも @font-face でも動作しないようです...そして、font-weight を設定できないため、フォント (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 に答える