CSS - ブラウザのユーザー CSS でフォントを変更した際に起こる問題について

環境

Windows 10
Google Chrome 73

質問内容

先日の Windows アップデートで追加された「UD デジタル教科書体」というフォントが気に入っているので、ブラウザで閲覧する際にも使いたいと思いました。
Chrome の設定のフォント設定で「UD デジタル書体 NK-R」を設定したところ、一部のサイトでは変更が反映されるですが、teratail を含むほとんどの Web サイトではサイトの CSS で設定されたフォントが優先されてしまうため、フォントが変更されませんでした。

そのため、Stylebot というカスタム CSS を適用できる拡張を入れて、以下の CSS を書きました。

css
1* {
2    font-family: "UDデジタル教科書体 NK-R" ;
3}

すると、確かに Web サイトのフォントを変更できたのですが、以下の問題が発生しています。

問題1

teratail で今まで表示されていなかった、i タグの値が表示されてしまいます。
例: remove

問題2

以下は Qiita の例ですが、Font Awesome のアイコンが□で表示されてしまいます。

例: 

聞きたいこと

Web 製作者が指定していないフォントに勝手に変更しているので、デザインが崩れるならわかるのですが、今まで表示されていなかった i タグの値が表示されたり、Font Awesome のアイコンが文字化け？したりする現象がなぜ起こってしまうのでしょうか？
上記の不具合を引き起こさず、フォントを変更できる CSS の記述方法があれば、ご教示いただけると幸いです。

すみませんが、よろしくおねがいします。

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

回答1件

ベストアンサー

Web 製作者が指定していないフォントに勝手に変更しているので、デザインが崩れるならわかるのですが、今まで表示されていなかった i タグの値が表示されたり、Font Awesome のアイコンが文字化け？したりする現象がなぜ起こってしまうのでしょうか？

アイコンフォントに英数字の字形が無いため表示されていなかった物を、字形があるフォントで上書きしたからでは？

投稿2019/03/19 17:23

kei344

総合スコア69407

tiitoi

2019/03/19 17:45 編集

ご回答ありがとうございます。セレクタを * から body に変更したら、質問の問題は直りました。 body { font-family: "UDデジタル教科書体 NK-R" ; } ちなみにこれはどういう仕組みなのでしょうか？

kei344

2019/03/19 17:46

仕組みとは？どういう答えを求めておられるかがわかりません。「CSS」とか「セレクタ」とかでいいですか？

tiitoi

2019/03/19 18:10 編集

質問が漠然としており、申し訳ありません。優先順位が「全称セレクタ * < 要素セレクタ body < class セレクタ」の順に高いと理解しているのですが、「全称セレクタ *」から「要素セレクタ body」に変えたことでなぜ問題が直ったのかがよく理解できておりません。「全称セレクタ *」だとそれより優先順位が高いはずのアイコンの class='fa fa-line-chart' などで設定された font-family が上書きされてしまい、逆に要素セレクタ body にしたら、上書きされなくなったのかという点についてです。

kei344

2019/03/19 18:16

＞逆に要素セレクタ body にしたら、上書きされなくなったのかという点 body に書かれた指定より要素への指定のほうが優先されるからです。 body { font-size: 15px; } .fa { font-size: 25px; } これなら .fa が優先されますよね？全称セレクタはクラスセレクタより優先度は低いですが、他の物で指定していない値は上書きされます。

kei344

2019/03/19 18:22

<body>spanspanother</body> body { font-size: 15px; } .fa { font-size: 25px; } * { font-size: 35px; } https://jsfiddle.net/ayxhL3u2/

tiitoi

2019/03/19 18:51 編集

具体例まで載せていただきありがとうございます。 > 他の物で指定していない値は上書きされます。全称セレクタから要素セレクタに変更したことによる挙動の変化について理解できました。要素セレクタを指定した際、その子孫要素にも指定したことになると勘違いしていましたが、そうではないので、全称セレクタの指定が効くのですね。また優先度が高い .fa のクラスセレクタが指定されているものまでなぜ全称セレクタで上書きされるのか疑問だったのですが、確認したところ、ユーザーCSSを適用する拡張のほうで勝手に important が入れられてしまっており、それで全称セレクタにした際、上書かれてしまっているのが原因でした。この度は丁寧なご解説ありがとうございました。

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