Q&A
開発者ツールやwhat's fontなどのツールを使って、なんというフォントが適用されているかわかりますか？
font-familyの適用がファイルごとに異なってしまう現象が起きてしまいました。
以下はtyping.htmlのコードになります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Typing Game</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <p id="target">click to start</p> <p class="info"> Letter count<span id="score">0</span>, Miss count: <span id="miss">0</span>, Time left:<span id="timer">0</span> </p> <script src="js/main.js"></script> </body> </html>
以下はstyle.cssです
css
1body{ 2 padding-top:40px; 3 font-family:'Courier New',monospace; 4 text-align:center; 5} 6#target{ 7 font-size:48px; 8 letter-spacing:3px; 9} 10 11.info{ 12 color:#ccc; 13}
そして、typing.htmlの実行画面の結果は以下になります。
以下は、practice_typing.htmlのコードです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/typing.css"> <title>Document</title> </head> <body> <h1 id="top_word">click to start</h1> <p class="letter_content"> Letter count:<span id="Letter_label">0</span>, Miss count:<span id="Letter_miss_label">0</span>, Time left:<span id="time_left"></span> </p> <script src="js/typing.js"></script> </body> </html>
以下は、typing.cssです。
body{ margin-top:70px; font-family:'Courier New',monospace; text-align:center; user-select:none; } h1{ letter-spacing:0.2em; } .letter_content{ opacity:0.5; }
font-familyの設定は同じなのですが、「click to start」の部分のフォントが違ってしまっています。
こちらの現象につきまして、解決法などご助言頂ければ幸いです。
デベロッパーツールで確認した所、２つのファイルは同じフォント（font-family: 'Courier New',monospace;）が適用されていました
回答2件
0
ベストアンサー
フォントは同じですね。
違いはフォントサイズと文字間隔とフォントウェイトです。
h1タグにはデフォルトでfont-weight:boldが適応されます。
どのようにしたいのかはよくわかりませんが、practice_typing.htmlの方を変更して合わせるならば、下のような感じで揃うのではないかと思います。
css
1//typing.css 2h1{ 3 font-size:48px; 4 letter-spacing:3px; 5 font-weight: normal; 6}
投稿2019/08/20 03:18
総合スコア683
0
直接の解決策ではありませんが、
同じ指定は共通CSSにして、個別のものだけ個別CSSに書いてみては？
例：
共通
css
1body{ 2 font-family:'Courier New',monospace; 3 text-align:center; 4}
typing用
css
1body{ 2 padding-top:40px; 3}
practice_typing用
css
1body{ 2 margin-top:70px; 3 user-select:none; 4}
とすることで、HTML構成の過ちに気づくこともできて、
CSSよりそっちを見直そう・・・というのを伝える意図の回答でした。
そこが伝わらなくて低評価となるのは大変悲しいですね。
おかしいのはCSSよりもHTMLの方ですよ。
もちろん同じ指定が別のCSSに散らばっているのも大問題です。
投稿2019/08/20 03:11
編集2019/08/20 03:33
総合スコア80850
あなたの回答
tips
プレビュー
