☰

Firefox で特定のウェブサイトのみ、特定のフォントのみのフォントを置き換える

tag-icon • tag-icon firefox fonts
Firefox で特定のウェブサイトのみ、特定のフォントのみのフォントを置き換える

ウェブサイトのフォントを置き換える方法はあるのでしょうか。ただし、特定のウェブサイトのみで可能ですか? コンテンツの下のオプションがあることは知っていますが、それはすべてのウェブサイトに適用され、特定のウェブサイトでのみ問題が発生し、特定のフォントでのみ問題が発生することもあります。

答え1

ページ数に応じて、スタイリッシュオプションになるかもしれません。簡単な CSS ファイルを作成し、そこでフォントを再定義します。

その後、スタイルを適用する URL を選択します。

font-family: whatever;高度な CSS の知識は必要ありません。で十分です。

答え2

これを行うには、ユーザー スタイル シートを作成します。ユーザー スタイル シートを使用すると、サイトの CSS スタイルを上書きして独自のスタイルに置き換えることができます。

まず、Firefox のプロファイル フォルダーを見つけて CSS ファイルを作成する必要があります。これを行うには、次の手順を実行します。

  • Firefoxメニューをクリックします（Firefoxウィンドウの左上隅にあります）
  • ヘルプ -> トラブルシューティング情報を選択します
  • [アプリケーションの基本設定] セクションで、[プロファイル フォルダー] 行のShow Folderまたはボタンをクリックします。Edit Folder
  • 開いたフォルダ内で、chromeフォルダに移動するか、(存在しない場合は) という名前の新しいフォルダを作成しますchrome。
  • という新しいテキストファイルを作成しますuserContent.css

次に、その新しいファイルをテキスト エディター (Windows のメモ帳など) で開きます。

CSS を使用して特定の Web サイトのスタイルを上書きできるようになりました。たとえば、この Web サイトのすべてのメイン フォントを Serif スタイルに変更するには、次のようにします。

@-moz-document domain(superuser.com){ html, p, li, h1 {font-family : serif !important;} }

または、StackOverflow のすべてのリンクを斜体の Arial フォントに変更するには、次のようにします。

@-moz-document domain(stackoverflow.com){ a {font-family : arial !important;font-style:italic !important;} }

これらの CSS 行を分解すると、次の内容で構成されています。 @-moz-document domain(superuser.com)これは、新しいルールを適用する Web サイトを指定する行の部分です。変更する Web サイトに「superuser.com」を置き換えるだけです。は、html, p, li, h1そのページでスタイルを変更する HTML 要素のリストです。font-family : serif !important;は、HTML に適用する新しい CSS スタイル ルールです。この!importantディレクティブにより、このファイル内の CSS がサイト独自のスタイルシート内の CSS を上書きします。

したがって、usercontent.css ファイルには次の内容が含まれます。

@-moz-document domain(superuser.com){ html, p, li, h1 {font-family : serif !important;} }

@-moz-document domain(stackoverflow.com){ a {font-family : arial !important;font-style:italic !important;} }

次に、そのファイルを保存して Firefox を再起動すると、テキストが希望どおりのスタイルになっていることがわかります。

答え3

https://superuser.com/a/532623/460302上記はStackExchangeで見つけた最高の回答ですが、スタイルシートのクラス（https://ffeathers.wordpress.com/2013/03/10/how-to-override-css-stylesheets-in-firefox):

上記の 1 行構文に加えて、userContent.css次のような複数行エントリを含めることもできます。

@-moz-document domain(jsbin.com){ 

#bin .editbox .CodeMirror pre,
.mobile .editbox textarea {
  font-family: Menlo, Monaco, consolas, monospace !important;
}
}

これは実際には、jsbin のスタイルシート (jsbin v4.1.0 から) の 1 つの変更されたセクションでありstyle.css、jsbin の「Source Code Pro」フォントの使用を無効にします。

関連情報