web-dev-qa-db-ja.com

特定のWebサイトのみ、および特定のフォントのみでFirefoxのフォントを置き換えます

特定のWebサイトでのみ、Webサイトのフォントを置き換える方法はありますか？コンテンツの下のオプションを知っていますが、それはすべてのWebサイトに当てはまり、特定のWebサイトだけが問題を引き起こしており、特定のフォントだけが問題を引き起こしている場合もあります。

firefoxfonts
9
Avery3R

ページ数によっては、 スタイリッシュ がオプションになる場合があります。フォントを再定義する単純なcssファイルを作成します。

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

優れたCSSの知識は必要ありません。font-family: whatever;を使い続けることができます。

6
mreq

これを行うためのユーザースタイルシートを作成できます。ユーザースタイルシートを使用すると、サイトの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サイトを指定する行の一部であり、「superuser.com」をWebサイトに置き換えるだけです。あなたが変えたいこと。 _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を再起動すると、テキストが希望どおりにスタイル設定されていることがわかります。

4
GAThrawn

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 style.cssから）の1つの変更されたセクションであり、jsbinによる「SourceCodePro」フォントの使用を無効にします。

0
CODE-REaD