2009-06-13 15 views
222

私はHTMLとCSSにとって新しく、CSSを使って自分のフォントを太字にする方法を考えていました。CSSを使用して私のフォントを太字にする方法は?

私は、CSSファイルをインポートプレーンなHTMLページを持っている、と私はCSSでフォントを変更することができます。しかし、私はフォントを太字にする方法を知らない、誰でも私を助けることができますか?

+6

CSS2の仕様を読むことをお勧めします。これは、できることとそのやり方を非常に詳しく説明しています。そしてそれはあまりにも乾燥していません。 http://www.w3.org/TR/CSS2/ –

+0

[html/cssの段落内で太字にする方法は?](http://stackoverflow.com/questions/9058425/how-to-bold) -words-a-paragraph-in-html-css) – Ejaz

答えて

28

あなたはfont-weight: boldを使用すると思います。

あなたは文書全体を太字にしたいですか?またはそれの一部だけ?

5

フォント重量:太字;

あなたは偉大な意味的に(また、良好なスクリーンリーダーなど) は通常は、太字テキストを表示する、あるHTML、中 the strong elementを使用することができます
64

See here, some <strong>emphasized text</strong>.

またはあなたができますthe font-weight css propertyを使用して、要素のテキストを太字にする:

span { font-weight: bold; }
<p>This is a paragraph of <span>bold text</span>.</p>

+0

2番目の段落全体を太字にしてありますので、「太字」という言葉は強調していません。単なるスタイルです。 – GKFX

6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<HTML> 
<HEAD> 
<STYLE type="text/css"> 
    body 
    { 
     font-weight: bold; 
    } 
</STYLE> 
</HEAD> 
<BODY> 
Body text is now bold. 
</BODY> 
</HTML> 
25

サインあなたはここにHTMLに新しく追加されたHTMLと一緒にCSSを使用する方法の例を使用する準備ができている3。あなたは、単に、ファイルに入れて保存し、お好みのブラウザでそれを開くことができます。

この1つは直接あなたのタグ/要素にあなたのCSSスタイルを埋め込みます。一般に、これは非常に素晴らしいアプローチではありません。なぜなら、content/htmlを常にデザインから分離する必要があるからです。

<?xml version='1.0' encoding='UTF-8'?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">  
    <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Hi, I'm bold!</title> 
    </head>   
    <body> 
     <p style="font-weight:bold;">Hi, I'm very bold!</p> 
    </body> 
</html> 

次は、より一般的なアプローチであり、ドキュメント内のすべての "p"(段落を表す)タグで動作し、追加すると巨大になります。 Btw。しかしここで、

<?xml version='1.0' encoding='UTF-8'?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">  
    <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Hi, I'm bold!</title> 
     <style type="text/css"> 
      p { 
       font-weight:bold; 
       font-size:26px; 
      } 
     </style> 
    </head> 
    <body> 
     <p>Hi, I'm very bold and HUGE!</p> 
    </body> 
</html> 

あなたはおそらく最初の例で遊んで数日かかるだろう最後のものである:Googleが彼の検索でこのアプローチを使用しています。これで、最終的に2つの異なるファイルでデザイン(css)とコンテンツ(html)を完全に分離します。 stackoverflowはこのアプローチを採用しています。あなたがHTMLを置く( 'hello_world.html' それを呼び出す)必要があります

p { 
    font-weight:bold; 
    font-size:26px; 
    } 

別のファイルで:

一つのファイルには、すべてのCSSを入れて( 'hello_world.css' それを呼び出します)

<?xml version='1.0' encoding='UTF-8'?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">  
    <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Hi, I'm bold!</title> 
     <link rel="stylesheet" type="text/css" href="hello_world.css" /> 
    </head>  
    <body> 
     <p>Hi, I'm very bold and HUGE!</p> 
    </body> 
</html> 

これは少し役立ちます。ドキュメント内の特定の要素に対処するには、すべてのタグではなく、classid、およびnameの各属性に精通している必要があります。楽しむ!

4
Selector name{ 
font-weight:bold; 
} 

は、あなたがカップルのアプローチを使用することができ

p{ 
font-weight:bolder; 
font-weight:600; 
} 
-2

のような他の代替値の代わりに、大胆に使用することができますp要素

p{ 
font-weight:bold; 
} 

のために太字にしたいとします。最初に強いタグを使用することになります

Here is an <strong>example of that tag</strong>. 

もう1つの方法は、font-weightプロパティを使用することです。インライン、またはクラスまたはIDを使用して達成することができます。あなたがクラスを使っているとしましょう。

.className { 
    font-weight: bold; 
} 

また、あなたはまた、フォントの太さのためにハード値を使用することができますし、ほとんどのフォントは、例えば100でインクリメント300と700の間の値を、サポートして、大胆になり、次の

.className { 
    font-weight: 700; 
} 
+0

その他の回答は、すでにこれらの点をカバーしています。この回答はどのように価値を付加しますか? –

関連する問題