特定のWebサイトと特定のフォントのみでFirefoxのフォントを置き換える

9

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

firefox fonts

— Avery3R
ソース

どんなトラブル？

— Karan

フォントはアンチエイリアス用に設計されています。CRTモニターを使用しています。AAがオンの場合はがらくたに見え、AAがオフの場合はがらくたに見えます。

— Avery3R 2013年

このようなことをする唯一の方法は、カスタムのユーザースクリプトを書くことかもしれません。

— Karan

関連（同じファイルを含むuserContent.css）：FirefoxとChromeでリンクの色を変更し、他の色とフォントはそのままにするにはどうすればよいですか？

— Peter Mortensen

6

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

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

優れたCSSの知識は必要ありませんfont-family: whatever;。

— mreq
ソース

これは受け入れられる答えです^^シンプルでニーズを解決します！

— Nam G VU

4

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

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

Firefoxメニュー（Firefoxウィンドウの左上隅）をクリックします。
[ヘルプ]-> [トラブルシューティング情報]を選択します
[Application Basics]セクションで、[ Profile Folder]行の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を再起動すると、テキストが希望どおりにスタイル設定されていることがわかります。

— GAThrawn
ソース

1

この答えは私の好みです。プロファイルディレクトリの設定はバージョン管理が簡単で、Firefoxが拡張機能をサポートしなくなったときに有効にできない可能性が低くなります。

— Ed Neville

0

上記のhttps://superuser.com/a/532623/460302はStackExchangeで見つけた最良の回答ですが、スタイルシートのクラスに関する詳細を追加したいと思います（https://ffeathers.wordpress.com/2013から派生）/ 03/10 / how-to-override-css-stylesheets-in-firefox）：

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

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

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

これは実際には、jsbinのstyle.css"Source Code Pro"フォントの使用を無効にするjsbinのスタイルシート（jsbin v4.1.0から）の変更されたセクションです。

— コードリード
ソース