如何使用 css 使我的字体加粗？答案

【问题标题】：How to make my font bold using css?如何使用 css 使我的字体加粗？
【发布时间】：2010-11-02 17:35:24
【问题描述】：

我对 HTML 和 CSS 非常陌生，我只是想知道如何使用 CSS 使我的字体加粗。

我有一个导入 CSS 文件的纯 HTML 页面，我可以更改 CSS 中的字体。但是我不知道如何使字体变粗，有人可以帮我吗？

【问题讨论】：

我建议您阅读 CSS2 规范，它非常详尽地解释了您可以做什么以及如何去做。而且也不太干。 w3.org/TR/CSS2
how to bold words within a paragraph in html/css?的可能重复

标签： css

【解决方案1】：

你会使用font-weight: bold。

您想让整个文档加粗吗？还是只是其中的一部分？

【讨论】：

【解决方案2】：

font-weight: bold

【讨论】：

【解决方案3】：

使用 CSS font-weight 属性

【讨论】：

【解决方案4】：

您可以使用 CSS 声明 font-weight: bold;。

我建议您阅读http://htmldog.com/guides/cssbeginner/ 的 CSS 初学者指南。

【讨论】：

【解决方案5】：

字体粗细：粗体；

【讨论】：

【解决方案6】：

您可以在 html 中使用 the strong element，这在语义上非常好（也适用于屏幕阅读器等），通常呈现为粗体文本：

See here, some &lt;strong&gt;emphasized text&lt;/strong&gt;.

或者您可以使用the font-weight css property 将任何元素的文本设置为粗体：

span { font-weight: bold; }

&lt;p&gt;This is a paragraph of &lt;span&gt;bold text&lt;/span&gt;.&lt;/p&gt;

【讨论】：

我把整个第二段都加粗了，所以不是强调“粗体文本”，它只是风格。
如果你想强调某些东西，它只会在语义上很好；如果它是一种没有试图强调的风格，<strong> 元素在语义上会产生误导。

【解决方案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>

【讨论】：

【解决方案8】：

如果您是 html 新手，这里有三个准备使用的示例，说明如何将 CSS 与 html 一起使用。您可以简单地将它们放入一个文件中，保存并使用您选择的浏览器打开它：

这个直接将您的 CSS 样式嵌入到您的标签/元素中。通常这不是一个很好的方法，因为您应该始终将内容/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”（代表段落）标签，并且额外使它们变得巨大。顺便提一句。 Google 在他的搜索中使用了这种方法：

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

您可能需要几天时间来研究第一个示例，但这是最后一个示例。在此，您最终将设计 (css) 和内容 (html) 完全分离在两个不同的文件中。 stackoverflow 采用了这种方法。

您将所有 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 属性。玩得开心！

【讨论】：

【解决方案9】：

Selector name{
font-weight:bold;
}

假设你想为 p 元素加粗

p{
font-weight:bold;
}

您可以使用其他替代值代替粗体，例如

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

【讨论】：

【解决方案10】：

您可以使用几种方法。首先是使用强标签

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

另一种方法是使用 font-weight 属性。您可以实现内联，或通过类或 id。假设您正在使用一个类。

.className {
  font-weight: bold;
}

或者，您也可以为 font-weight 使用硬值，大多数字体支持 300 到 700 之间的值，以 100 为增量。例如，以下内容为粗体：

.className {
  font-weight: 700;
}

【讨论】：

其他答案已经涵盖了这些要点。这个答案如何增加价值？