フォントが違って見えるのはなぜですか？

私はdafont.comからこれはフォントが見えるようになっている方法ですしまったことCGF Locustの抵抗フォントを使用しています：http://www.dafont.com/cgf-locust-resistance.font、これはそれが私のWebページ上でどのように見えるかです：https://postimg.org/image/r2a1xcxun/フォントが違って見えるのはなぜですか？

あなたは手紙を見て見ることができるように特に「F」、「A」、「E」で目立つようになりました。ここに私のCSSとHTMLコードです。誰がなぜこれのような理由を知っている？

HTML：

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Gears Of War</title> 
    <link rel="stylesheet" type="text/css" href="index.css"> 
</head> 
<header> 
    <h1>GEARS OF WAR</h1> 
</header> 
<body> 
    <?php 
    // put your code here 
    ?> 
</body> 
</html>

CSS：

body { 
background-color: #1a1a1a; 
} 

header { 
font-family: CGF Locust Resistance; 
letter-spacing: 30px; 
text-align: center; 
font-size: 28px; 
color: lightgray; 
text-shadow: 
-1.5px -1.5px 0 black, 
1.5px -1.5px 0 black, 
-1.5px 1.5px 0 black, 
1.5px 1.5px 0 black; 
}

フォントフェイス宣言：

@font-face { 
font-family: cgf_locust_resistanceregular; 
src: url('Downloads/cgf_locust_resistance-webfont.woff2') format('woff2'), 
    url('Downloads/cgf_locust_resistance-webfont.woff') format('woff'); 
font-weight: normal; 
font-style: normal; 

}

出典

2016-09-10 Cian

フォント自体やブラウザがフォントをレンダリングする方法に問題がある可能性があります。 FFやSafariでは、ここでは大丈夫ですが、Chromeではそうは見えません。 –

FFで試してみましたが、私にとっては同じように見えます – Cian

あなたのフォントフェイス宣言を投稿できますか？ –

問題はおそらくH1タグが太字にフォントの太さを強制的にデフォルトのブラウザのスタイルを持っているという事実によるものです。 h1タグのfont-weightをnormalに設定すると、問題はなくなります。

フォントは太字のスタイリングではうまくいきません。

出典

2016-09-10 21:48:50

それが問題でした！ありがとうございました – Cian

このフォントファミリのような単一引用符であなたのフォント名を入れて：「CGF Locustの抵抗あなたのフォント名にスペースがあるからです。フォント名が空白を含む場合は

出典

2016-09-10 19:26:55

私はここで引用符を使用することに同意しますが、OPがそのフォントをテストするブラウザが正しいフォントを使用していることをイメージが示しています。したがって、引用符を追加しても問題は解決されません。小さいです）。 –

引用符が必要な場合は、ブラウザが空白のために誤って解釈することがあります。カンマが必要です。 –

次に、この[link]（https://github.com/necolas/normalize.css/）から入手できる正規化されたスタイルシートを追加してみることができます –

font-family: "CGF Locust Resistance";

することは、それははを引用符で囲む必要があります。サイドノート：「スタイル」属性をHTMLに使用する場合は、一重引用符を使用する必要があります。

出典

2016-09-10 19:38:01

"dafont.com"は "CGF Locust Resistance.ttf"ファイルを提供しました。したがって、（woffとwoff2）ファイルを取得するには、このフォントを生成する必要があります。これはhereから生成できます。その後、あなたのフォントフォルダにthosフォントファイルを置き、あなたのCSSファイルにそれらを呼び出す必要があります。私は完全なプロセスを示すためにビデオを作ります。あなたのコンセプトが明確になると思うビデオを見てください。 https://www.youtube.com/watch?v=SV1-VEAmM-0&feature=youtu.be

@font-face { 
    font-family: 'cgf_locust_resistanceregular'; 
    src: url('fonts/cgf_locust_resistance-webfont.woff2') format('woff2'), 
     url('fonts/cgf_locust_resistance-webfont.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 

} 

header { 
font-family: CGF Locust Resistance; 
letter-spacing: 30px; 
text-align: center; 
font-size: 28px; 
color: lightgray; 
text-shadow: 
-1.5px -1.5px 0 black, 
1.5px -1.5px 0 black, 
-1.5px 1.5px 0 black, 
1.5px 1.5px 0 black; 
}

出典

2016-09-10 20:16:38

うん、うまくいきませんでした – Cian

@Cianあなたは自動生成されたcgf_locust_resistance-demo.htmlを開こうとしましたか？これはChromeでよく見えます。 – derloopkat

ehどこから取得するのですか – Cian

あなたは大文字で、あなたのキャラクターを持っているからだとかなり確信して小文字を使用した場合に、粒子との文字が少なくともフォントの仕様に応じて、有効になります。 http://puu.sh/r6Ibi/31f3fc195a.png

出典

2016-09-10 20:23:35

フォントが違って見えるのはなぜですか？

答えて

関連する問題