2009-09-06 10 views
8

を増やす可能性の重複:
Allow users to change font size in a webpageCSS - ページのフォントサイズに

こんにちは、

を私はいくつかのWebページを持っています。私は、ユーザーが画像をクリックして、ページ上のすべてのコンテンツのフォントサイズを大きくしたいと思います。これは可能ですか?もしそうなら、どうですか?

ブラウザにはオプションがあります。基本的に、私はページそのものでそれを行う方法が欲しい。

ありがとうございます。

+1

デュエット:http://stackoverflow.com/questions/891980/change-font-size-in-a-webpage/892031 –

答えて

1

<body>のような最上位要素のフォントサイズを大きくすると、その[変更された]サイズはその子要素によって継承されます(これらの要素の他のCSS規則では、ユーザーのブラウザで変更されたフォントサイズを混乱させてしまった)。

This article(たとえば)は、プログラムでCSS値を変更する方法を説明しています。これを達成するための

20

3つのこと:

<body>タグで全体のフォントサイズを指定します。例:

body { font-size: 100%; } 

ドキュメント内の他の場所では、ピクセルを使用してフォントサイズを指定しないでください。

p.somePara { font-size: 120%; } 
p.anotherPara { font-size: 1.4em; } 

イベントハンドラをこのイメージにアタッチし、それに応じてフォントサイズを調整します。たとえば、jQueryを使用します。

$("#largerTextImage").click(function() { 
    $("body").css("fontSize", "120%"); 
}); 

完了しました。

+0

編集してitty bitty構文エラーを修正してください:) –

0

私はあなたがCSSを切り替えることができると言います。

すべてのフォントサイズを区切ったCSSファイルに入れます。次に、このファイルを複製し、フォントサイズを変更します。次に、jsスクリプトを使用してcssファイルをswichします。

そこにはすべてのことを説明するチュートリアルがたくさんあります。 Here's one

+0

これは非常に粗い方法です使用することはありません。 –

+0

なぜですか?あなたのウェブサイトがどのように見えるかを制御するために、すべての要素に異なるフォントサイズを指定できるので、これはかなり面白いです。 – marcgg

+0

1)そのようなCSSファイルを変更することは、実際には少し荒いです。本体に追加/削除するクラスを使用すると、インスタントアップデートと同じように改善されます。フォントサイズを変更するだけで新しいファイルはダウンロードされません。 2)この方法は、サイト全体のフォント調整より小規模な変更に適しています。そのような小さな機能のためには、余分なCSSの書き方がたくさんあります。この機能が必要な場合は、bigmattyhの答えで説明されているような%またはemベースのメソッドを実行し、小規模の切り替えトグルジョブに対するこの答えのメソッドを残してください。 –

関連する問題