如何使用CSS使字体加粗?


249

我是HTML和CSS的新手,我只是想知道如何使用CSS使字体加粗。

我有一个纯HTML页面,可以导入CSS文件,并且可以在CSS中更改字体。但是我不知道如何使字体加粗,有人可以帮我吗?


6
我建议您阅读CSS2规范,它对可以做什么以及如何做提供了非常详尽的解释。而且也不是太干。 w3.org/TR/CSS2
罗伯特·K

Answers:



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>


我将整个第二段用粗体表示,因此它不是在强调“粗体”一词,而只是样式。
GKFX

2
如果您要强调某些东西,那么从语义上来说这才是很棒的。如果它是一种风格而又不想强调,则该<strong>元素在语义上具有误导性。
jtpereyda


26

确实,您是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> 

希望这有所帮助。为了您的文档中的地址的具体内容,而不是所有的标签,你应该让自己熟悉classidname属性。玩得开心!



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;
}

或者,您也可以对字体粗细使用硬值,并且大多数字体支持300到700之间的值,并增加100。例如,以下内容将为粗体:

.className {
  font-weight: 700;
}

其他答案已经涵盖了这些要点。这个答案如何增加价值?
罗勒·布尔克
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.