9

簡単な質問：この2つのフォントがフォトショップとウェブサイトで異なって見えるのはなぜですか。

この写真では、この最初のテキストはhtmlコードからのもので、2番目はフォトショップからの画像です。同じフォント、同じサイズ-30。しかし、これは最初は2番目よりも「太字」に見えます。なんで？フォトショップと同じフォントにしたい（2枚目）。

ここにcssコードがあります：

@font-face {
font-family: "SegoeWP";
src: url("fonts/play/SegoeWP.eot");
src: url("fonts/play/SegoeWP.eot?#iefix")
         format("embedded-opentype"),
     url("fonts/play/SegoeWP.woff") format("woff"),
     url("fonts/play/SegoeWP.ttf") format("truetype"),
     url("fonts/play/SegoeWP.svg#PlayRegular") format("svg");
font-weight: lighter;
}

#strona {
  width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

#Section1 
{
      font-family: "SegoeWP", Tahoma, Arial, sans-serif;
      font-size: 30px; 
}



header, footer, article, section, hgroup, nav, figure {
    display: block;
}


 body {
  font-family: "SegoeWP", Tahoma, Arial, sans-serif;
  background-image:url('background.jpg');
  background-repeat: no-repeat;
  background-position: top center;
  color: #ffffff;

 }

そしてhtmlコード。

  <section id="Section1">  { mywebsite.NET } </section>
  <img src="mojeportfolio.png" />

何か案は？ご挨拶！

もっと

フォルダに3種類のSegoeWPフォントがあることがわかりました。「SegoeWP」、「SegoeWP-Light」、「SegoeWP-Semibold」。「SegoeWP」は少し「太字」に見えますが、この「SegoeWP-Light」は完璧で、ダブルクリックするとフォトショップと同じように見えます。どうすれば自分のWebサイトで使用できますか？この部分を変更しても->url（ "fonts / play / SegoeWP-Light。*"）、Webサイトでは何も変更されません。なにが問題ですか？

4

3 に答える 3

5

フォトショップは、ウェブブラウザとは大きく異なる方法でフォントを処理します...フォトショップはスムージングやカーネルなどの機能を使用しているため、ほとんどの場合、フォントはブラウザで異なって見えます。

于 2012-09-21T16:15:47.280 に答える
5

同じ結果を得るには、を使用しfont-smoothing: antialiased、Photoshopの画像と一致するようにフォントサイズを小さくしてみてください。

最大の違いは、Adobe Photoshopは、ほとんどのブラウザとは異なり、サブピクセルのフォントスムージングを実行しないためです。サンプル画像では、ズームインするとこれが簡単に表示されます（エッジの周りの色の変化を参照してください）。Windowsには、サブピクセルフォントレンダリングの非常に鮮明な形式を使用してきた歴史があります。これは、知覚されるフォントの太さが大幅に変化する可能性があるため、問題を悪化させます。

Smashing Magazineには、フォントレンダリングに関する優れた記事があります。

于 2012-09-22T12:30:52.750 に答える
-2

問題になる可能性がある適切な場所にCSSを追加していることを確認してください。フォントの太さを減らす方法の完全なメモについては、ここで見つけることができます：

http://www.w3schools.com/css/tryit.asp?filename=trycss_font-weight

于 2012-09-21T16:43:25.733 に答える