リセットcssを使うとフォントの指定ができない

実現したいこと

リセットcssを使った際にfont-familyでフォントをしていしても反映されないので解決したい。

前提

最初destyle.cssも使っていたのですが、front-familyでフォントを指定しても反映されません。そこでdestyle.cssをコメントアウトしたところ反映されました。
destyle.cssはほぼすべての設定をリセットしてしまうということで初心者の私には扱いが難しいのかと思いsanitize.cssを使ったのですが同様にフォントが反映されません。
初歩的なことなのかもしれませんが解決方法を教えていただけるとありがたいです。

該当のソースコード

HTML
ソースコード

<html lang = "ja">
<html>
  <head>
	<meta charset="UTF-8">
	<title>タイトル</title>
	  
	  <link rel = "stylesheet" href="css/style.css">
	 
  </head>
   <body>
   <header>
	   <h1 class="題名">あいうえお</h1>
	   
   </header>
   </body>
</html>

css

@charset "UTF-8";
@import url(sanitize.css);

header h1{
	font-size: 60px;
	font-family: "ヒラギノ丸ゴ","Hiragino Maru Gothic";
	background-color: rgb(254, 163, 206);
}

試したこと

一応ネットで色々調べてみたのですが解決方法は分かりませんでした。

補足情報（FW/ツールのバージョンなど）

eclipseを使って書いています。

行動規範の内容に同意します

回答2件

WEBフォントを利用するなど共有化手順がなければフォントを含めたWEBページの再現性は担保されません。font-familyはあくまでクライアント側の環境に依存するものだと理解ください。
なお画像に埋め込んだり、アウトラインをとったりすると別途追加ライセンス契約や費用が発生する場合もあるのでご留意ください。

投稿2023/09/26 00:33

yambejp

総合スコア117674

ベストアンサー

該当のソースコードを手元で動作確認してみましたが、問題なくフォントが反映されました。
※ローカルにインストールされているフォント名にだけ書き換えています
(win10, firefox/chrome, sanitize.css/destyle.css どの組み合わせもok)

手元では問題が再現しなかったので
以降、一般的な解決方法を提示します。

前提条件として念のため確認なのですが

destyle.cssをコメントアウトしたところ反映されました

とあるので、ヒラギノ丸ゴフォント自体はインストールされていて
destyle.css除外時に間違いなくそのフォントで表示された…ということでよいでしょうか？

eclipseを使って書いています。

動作確認を行う際は、eclipse内部ブラウザを使用されているのでしょうか？
それともOSにインストールしてある、普段使うような一般的なブラウザ(chromeとかfirefoxとかSafariとかetc...)ででしょうか？

一般的なブラウザであれば、開発者ツールにて目的の要素(今回はheader h1)を選択することで
その要素に適応されているスタイルの詳細・どのCSS記述由来か・優先度(他のスタイル指定で上書きされていれば打消し戦表記になる)などが確認できます。

つまりheader h1要素を選択し「css/style.css 4行目で定義された font-family スタイルが存在しているか・活性化しているか」を直接確認できます。
またチェックボックスでon/off切り替えでそのスタイルを一時的に除外したりもできます。
これで css/style.css の font-family をon/offしてフォントがデフォルトに切り替わるのを確認したり
万が一これを上書きしている(優先度が上の) font-family 指定が存在したら、それをon/offして css/style.css 由来のものが反映されるか確認したりできます。

一般的なスタイルの問題は概ねこのやり方で確認・解消できるものが多いでしょう。

仮にeclipse内部ブラウザで動作確認している場合、開発者ツールのために別ブラウザを使うことになるかもしれませんが
そもそもブラウザ依存の原因もあるかもしれないですので、複数のブラウザで確認するとか、
また質問の際はどのブラウザで動作確認したかも記載するなど、意識すると良いかもしれません。

本筋ではないかもしれませんが、htmlの記述がおかしな箇所が見受けられます
少なくともDOCTYPE無しとかhtml要素複数記述とかは直した方がよいでしょう

html:最低限の改善例
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4  (以下略)

また、質問文だけ手打ちしたのかもしれませんが、

最初destyle.cssも使っていたのですが、front-familyでフォントを指定しても反映されません

ここの1か所だけfront-familyになっているのも気になります。
実際のソースコードでもtypoしていたりはないでしょうか？

投稿2023/09/25 17:01

pecmm

総合スコア760

YUUdesu

2023/09/26 13:24

タイプミスすみませんでした。実際のソースコードではタイプミスはしていませんでした。表示を確認しているのはedgeで、開発者ツールを使って該当箇所を確認したところチェックを外しても変化がなかった為、フォントは反映されていないのだと思います。リセットcssを使ったことで文字の配置や太さが変わって反映されたと勘違いしたのかと思います。多分フォントのインストールとやらができていないのだと思います。もう少し詳しく勉強してみようと思います。開発者ツールや他ブラウザでの確認など為になることを教えていただきありがとうございました。

行動規範の内容に同意します

あなたの回答