CSSを使用してフォントを太字にする方法は？

249

私はHTMLとCSSに非常に慣れていないので、CSSを使用してフォントをどのように太字にできるのか疑問に思っていました。

CSSファイルをインポートするプレーンHTMLページがあり、CSSでフォントを変更できます。しかし、フォントを太字にする方法がわかりません。だれでも手伝ってもらえますか？

css 
— ピータービー
ソース
6
CSS2仕様を読むことをお勧めします。これにより、何ができるか、およびその方法が非常に詳細に説明されます。また、乾燥しすぎていません。 w3.org/TR/CSS2
— Robert K
— Ejaz 2014

回答:

76

あなたは使用することができる要素意味的に素晴らしい、（また、スクリーンリーダーなどのために良い）であるHTMLで、通常はボールドテキストとしてレンダリングします：strong

See here, some <strong>emphasized text</strong>.
スニペットを展開

または、font-weightcssプロパティを使用して、要素のテキストを太字に設定できます。

span { font-weight: bold; }
<p>This is a paragraph of <span>bold text</span>.</p>
スニペットを展開

— エレノン
ソース
2番目の段落全体を太字にしたので、「太字」という言葉を強調するのではなく、単なるスタイルです。
— GKFX 2015年
2
あなたが何かを強調しようとしている場合、それは意味的に素晴らしいだけです。それを強調しようとしないスタイルである場合、<strong>要素は意味的に誤解を招くものです。
— jtpereyda 2018
26

あなたがhtmlに慣れていないので、CSSをhtmlと一緒に使用する方法の例をすぐに使用できます。それらをファイルに入れて保存し、任意のブラウザーで開くことができます。

これは、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"（段落を表す）タグで機能し、さらにタグを巨大にします。ところで グーグルは彼の検索にこのアプローチを使用しています：

<?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>

おそらく最初の例で遊んで数日かかるでしょうが、これが最後の例です。これで、最終的に2つの異なるファイルで互いに完全にデザイン（css）とコンテンツ（html）を分離します。stackoverflowはこのアプローチを採用しています。

1つのファイルにすべてのCSSを配置します（ 'hello_world.css'と呼びます）：

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

別のファイルにhtmlを配置する必要があります（ 'hello_world.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>  
        <link rel="stylesheet" type="text/css" href="hello_world.css" />  
    </head>       
    <body>
        <p>Hi, I'm very bold and HUGE!</p>
    </body>
</html>

これが少し役に立てば幸いです。すべてのタグではなく、ドキュメント内の特定の要素に対処するにはclass、idとname属性を理解する必要があります。楽しんで！

— メルクロ
ソース
8 
Selector name{
font-weight:bold;
}

p要素を太字にしたいとします

p{
font-weight:bold;
}

太字の代わりに他の代替値を使用できます

p{
 font-weight:bolder;
 font-weight:600;
}
— サントシュ・カルセ
ソース
7 
<!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>
— イアン・ボイド
ソース
-1

いくつかの方法を使用できます。最初は強いタグを使用することです

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

別のアプローチはfont-weightプロパティを使用することです。インラインで、またはクラスやIDを介して達成できます。クラスを使用しているとしましょう。

.className {
  font-weight: bold;
}

または、font-weightにhard値を使用することもできます。ほとんどのフォントは、300から700までの値を100ずつ増加させてサポートします。たとえば、次は太字になります。

.className {
  font-weight: 700;
}
— アンドリュー・ツーソン
ソース
他の回答はすでにこれらのポイントをカバーしています。この回答はどのように価値を加えますか？
— バジルブルク2018
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.