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 | Comment(0)
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]