css 特定のセレクタ以外に適用させる方法

ブラウザでの閲覧において、すべてのフォントを○○にしたいと云う場合がある。この場合、通常は以下のように記述すれば、すべてのセレクタに関して指定したフォントが有効になる。

* {
    font-family: ○○ !important;
}

しかしながら、これでは問題が生じる場合がある。それは、フォントによる絵文字を使用しているページである。このようなページでは、絵文字が所謂 ”豆腐” □ になってしまうのである。このような問題を回避するためには、絵文字フォントのセレクタでは、フォントの指定が無効になるように制御する必要がある。

:not(.icon):not(.icon_font):not(i) {
  font-family: ○○ !important;
}

上記の場合は、クラス名 [icon] , [icon_font] と セレクタ [i] が、 [font-family ...] 適用外となる。

クラス名に [icon] 文字列を含む場合すべてなら :not([class*="icon"]) としてもよい。

どのセレクタが使用されているか?は、ブラウザの ”要素の調査” を利用すれば簡単に調べることができる。 ↓ Firefoxでの事例。

58_001.png

このように対応すれば、自分の好みにあったフォントですべてのページの閲覧が可能となるワケである。

admin
カテゴリ:ブラウザ
タグ:CSS フォント
2017/01/12 17:44 | コメント (0)
この記事へのコメント (0)
すべてのコメントを 
コメントを書く
コメント投稿欄を 
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

ご質問等、回答が必要な場合に限り返信させて頂きます。ご容赦くださいませ。
2017-06-05 端末単体でTWRPの導入 公式Androidアプリ「Official TWRP App」
6 コメント
管理人 (2017-10-16) 匿名希望 (2017-10-16) 管理人 (2017-06-08) 石川通隆 (2017-06-08) 管理人 (2017-06-08) 石川通隆 (2017-06-07)
2016-06-30 快適に回線速度が測定できるサービス「Speedtest.net by Ookla」
4 コメント
管理人 (2017-10-15) 石川通隆 (2017-10-15) 管理人 (2017-05-22) 石川通隆 (2017-05-22)
2017-10-14 人参の ”おじや”
2 コメント
管理人 (2017-10-15) 石川通隆 (2017-10-15)
2015-12-17 Windows 10 タスクバーが自動で隠れなくなった場合の対処方法
55 コメント
通りすがり (2017-10-09) (2017-10-03) ぼん (2017-10-01) イライラ (2017-09-15) ガントランダー (2017-09-07) よ (2017-09-06) ゆンク (2017-07-23) まお (2017-06-09) たけ (2017-05-29) とおりすがり (2017-05-20) ななし (2017-02-22) あいうえお (2017-02-21) ゲス (2017-02-18) kaitons (2017-02-13) ゆっかり (2017-02-12) たろう (2017-01-07) 油ハム (2016-12-29) Leus (2016-12-21) 初日に10にした人 (2016-12-17) 管理人 (2016-11-27)
タグクラウド
このブログについて
jkun-400x400.jpg インターネット, パソコン, スマホ, Windows, Linux, Android, 各種アプリ, ブラウザ, ブラウザ拡張機能, 携帯電話, 社会情勢, 韓ドラ, K-POP 関連の話題を取り上げます。ジャンルとしては幅広く、特定のカテゴリに特化したブログではありません。お時間がありましたら、どうぞお立ち寄りくださいませ。
筆者プロフィール
カテゴリ