为了完全定制你的网站外观，你不能忘记排版——你如何安排和样式文本。根据您的设计、业务细分市场和受众，您可能希望更改字体、大小或字体的颜色。< / p >

例如，如果你喜欢你的黑色灰色配色方案，然后您要更改文本的默认字体颜色。如果您在媒体中，那么您可以选择SAN SERIF字体，被认为是最简单的排版。但如果你在创意领域，那么你可以选择装饰字体等莫里斯特洛伊。这些只是您想要在您的网站上进行字体的几个原因。< / p >

现在下载:免费介绍指南HTML和CSS

让我们来看看你如何用刚刚改变网站上的字体一点代码。我们会覆盖：< / p >

如何在HTML中更改字体类型

要在HTML中更改字体类型，请使用CSS字体 - 族属性。将其设置为所需的值，并将其放在样式属性中。然后将此样式属性添加到HTML元素，如段落，标题，按钮或跨度标记。< / p >

这就是您使用内联CSS的方式。内联CSS意味着你的HTML.和CSS将放在一起，在你的HTML文档的主体部分。所以，从技术上讲，你要改变HTML中的字体。< / p >

您曾经能够简单地使用字体标记更改HTML中的文本样式。所以说你想把你的字体改变为Arial，size 20px和漂亮的橙色颜色。您将写下以下HTML行：< / p >


HTML5.。它被更有效的方法所取代来改变文本的外观：即CSS。CSS文本格式为HTML字体标记是一个更轻量级和灵活的替代方案 - 并且不难学习。< / p >
让我们使用CSS重写上面的示例来更改段落的字体类型。值得注意的是，我正在使用代号，它使用时代新罗马作为其默认字体。我将要将样式属性添加到第一个段落元素，这意味着只有此段落将被打造。页面上的其他段落和标题将留在新罗马时代。< / p >
这是包含内联CSS的HTML：< / p >
如何更改HTML中的字体类型[内联CSS] < / p >
这是伪文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。 This is more dummy text. This is more dummy text.< / p >
< / p >< / p >
解释< / p >
由于我正在使用Codepen编辑器，默认字体是新罗马的次数。这意味着更改段落的字体将要求我使用包含设置为“ARIAL”的CSS字体系列属性的样式属性。页面上的其他元素不是由内联CSS的目标，因此仍然是新罗马的次数。< / p >
< / p >< / p >
结果:< / p >
看笔onbmjeb.由克里斯蒂娜百科（@hubspot.） 上CodePen。
虽然内联CSS适用于在页面上更改单个元素，但其他样式的CSS建议在内联CSS中。例如，内部CSS可以放在HTML Doc的头部部分，以在页面上的多个元素样式。< / p >
例如，假设我想将每个段落元素的字体更改为Arial。然后我可以用CSS选择器针对所有段落并将其放在页面的头部部分内。< / p >
这是CSS：< / p >
p {< / p >
字体 - 家庭：arial;< / p >
}< / p >
这是HTML：< / p >
如何更改HTML [内部CSS] 中的字体类型< / p >
这是虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。 This is more dummy text. This is more dummy text.< / p >
< / p >< / p >
解释< / p >
由于我正在使用Codepen编辑器，默认字体是新罗马的次数。这意味着更改页面上的所有段落的字体将要求我使用CSS类型选择器并将CSS字体族属性设置为“ARIAL”。页面上的标题仍将持续新罗马。< / p >
< / p >< / p >
结果:< / p >
看笔GRRBPYQ.由克里斯蒂娜百科（@hubspot.） 上CodePen。
既然我们了解如何使用内联和内部CSS更改字体类型，让我们将注意力转向字体大小。< / p >

               

                

                 
如何在HTML中更改字体大小

                 

                  
要在HTML中更改字体大小，请使用CSS字体大小属性。将其设置为所需的值，并将其放在样式属性中。然后将此样式属性添加到HTML元素，如段落，标题，按钮或跨度标记。< / p >

                

               
为了继续重写第一个使用废弃字体标签的例子，让我们用CSS将一个段落的字体大小更改为20px。对于本例，我仍然将使用CodePen，但我将加载Bootstrap CSS.在页面上。这意味着，除了默认字体类型是Helvetica之外，段落的默认字体大小将是16px，标题2S将是32px，标题为3s将是28px。< / p >
与上面一样，我将从向第一个段落元素添加style属性开始，这意味着只有这个段落将被样式化。页面上的其他段落和标题将保持默认大小。< / p >
这是包含内联CSS的HTML：< / p >
如何在HTML中更改字体大小[内联CSS] < / p >
< / p >< / p >
解释< / p >
我正在使用Codepen编辑器，但加载bootstrapcdn，因此身体和段落的默认字体大小为16px，H2S为32px，H3S为28px。默认字体也是Helvetica。这意味着更改第一段的大小将需要我使用包含设置为“20px”的CSS字体大小属性的样式属性。页面上的其他元素不是由内联CSS定位的，因此仍然是它们的默认大小。< / p >
< / p >< / p >
结果:< / p >
看笔如何改变HTML字体大小[内联CSS]由克里斯蒂娜百科（@hubspot.） 上CodePen。
现在让我们说我想将每个段落元素的字体更改为20px。然后我可以用CSS选择器针对所有段落并将其放在页面的头部部分内。< / p >
这是CSS：< / p >
p {< / p >
字体大小：20px;< / p >
}< / p >
这是HTML：< / p >
如何在HTML [内部CSS] 中更改字体大小< / p >
这是虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。< / p >
< / p >< / p >
解释< / p >
我正在使用Codepen编辑器，但加载bootstrapcdn，因此身体和段落的默认字体大小为16px，H2S为32px，H3S为28px。默认字体也是Arial。这意味着更改页面上的所有段落的大小将需要我使用CSS类型选择器并将CSS字体大小属性设置为“20px”。页面上的标题将其默认大小。< / p >
< / p >< / p >


结果:< / p >
看笔如何在HTML [内部CSS]中更改字体大小由克里斯蒂娜百科（@hubspot.） 上CodePen。
在同一段内改变字体大小
CSS对已弃用字体标记的CSS的另一个优点是它为您提供了更粒度的控制，以便您可以执行相同段落中更改文本的字体大小。< / p >
如果我想保持段落在它的默认字体大小，那么我只需将我想改变大小的文本在标签。然后我将添加一个style属性，将font-size属性设置为我想要的值。< / p >
这是包含内联CSS的HTML：< / p >
如何更改同一段落中的字体大小[内联CSS] < / p >
这是虚拟文本。这是更多的虚拟文本。这是较大的文本。这是更钝的文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。< / p >
< / p >< / p >
解释< / p >
我正在使用Codepen编辑器，但加载bootstrapcdn，因此段落的默认字体大小为16px。要在段落中更改文本的字体大小，我将在跨度标记中包装文本。然后，我将添加一个样式属性，该属性包含设置为16px以外的值的CSS字体大小属性。在此示例中，它设置为22px。< / p >
< / p >< / p >
这是结果：< / p >
看笔如何更改同一段落中的字体大小[内联CSS]由克里斯蒂娜百科（@hubspot.） 上CodePen。
如果我想改变段落的字体大小和段落内的文本为两种不同的大小，那么我最好使用内部CSS。我仍然会换行文本，我想改变的大小在标签。然后将ID属性添加到段落和span元素中。使用各自的ID选择器，我将把段落和span元素设置为两种不同的大小。< / p >
CSS:< / p >
#larger {< / p >
字体大小:18 px;< / p >
}< / p >
#smaller {< / p >
字体大小：14px;< / p >
}< / p >
HTML:< / p >
如何更改同一段落中的字体大小[内部CSS] < / p >
这是伪文本。这是更多的虚拟文本。这是较小的文本。这是更钝的文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。< / p >
< / p >< / p >
解释< / p >
我正在使用Codepen编辑器，但加载bootstrapcdn，因此段落的默认字体大小为16px。要更改段落中段落和文本的字体大小，我将在跨度标记中缠绕文本，并将id属性添加到段落和span元素。然后，我将使用ID选择器并将它们设置为页面的头部的不同字体大小。< / p >
< / p >< / p >
这是结果：< / p >
看笔如何改变字体大小在同一段[内部CSS]由克里斯蒂娜百科（@hubspot.） 上CodePen。
更深入地查看您可以使用的属性和值来更改文本的大小，阅读如何在CSS中更改字体大小。

               

                

                 
如何在HTML中更改字体颜色

                 

                  
要在HTML中更改字体颜色，请使用CSS颜色属性。将其设置为所需的值，并将其放在样式属性中。然后将此样式属性添加到HTML元素，如段落，标题，按钮或SPAN标记。< / p >

                

               
使用与上述相同的示例，现在让我们将段落的字体颜色更改为lorax橙色（十六进制颜色代码＃FF7A59)和CSS。对于这个例子，我将使用CodePen编辑器而不加载Bootstrap CSS。但是如果你真的想使用这个框架，默认的字体颜色是相同的。黑色)，过程也是如此。< / p >
与上面一样，我将从向第一个段落元素添加style属性开始，这意味着只有这个段落将被样式化。页面上的其他段落和标题将保持默认颜色（黑色）。< / p >
这是包含内联CSS的HTML：< / p >
如何在HTML中更改字体颜色[内联CSS] < / p >
颜色:# < p风格=”FF7A59“是更钝的文本。这是更钝的文本。这是更令人讨厌的文本。这是更令人讨厌的文本。< / p >
< / p >< / p >
解释< / p >
因为我使用的codedepen编辑器，默认的字体颜色是黑色。(无论你使用什么工具或框架来构建你的web项目，通常都会出现这种情况。)这意味着改变一个段落的颜色将需要我使用一个包含CSS颜色属性的样式属性，设置为十六进制颜色代码#FF7A59。页面上的其他元素不是由内联CSS的目标，因此保持黑色。< / p >
< / p >< / p >
结果:< / p >
看笔如何在HTML中更改字体颜色[内联CSS]由克里斯蒂娜百科（@hubspot.） 上CodePen。
现在假设我想改变每个段落元素的颜色为栗色。然后，我可以使用一个CSS选择器来针对所有段落，并将其放置在页面的头部部分。< / p >
这是CSS：< / p >
p {< / p >
颜色： ＃FF7A59;< / p >
}< / p >
这是HTML：< / p >
如何在HTML [内部CSS] 中更改字体颜色< / p >
这是虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。 This is more dummy text. This is more dummy text.< / p >
< / p >< / p >
解释< / p >
因为我使用的codedepen编辑器，默认的字体颜色是黑色。这意味着改变页面上所有段落的颜色将需要我使用一个CSS类型选择器，并设置CSS颜色属性为十六进制颜色代码为橙色(#FF7A59）。页面上的标题将保持黑色。< / p >
< / p >< / p >
结果:< / p >
看笔如何改变HTML的字体颜色[内部CSS]由克里斯蒂娜百科（@hubspot.） 上CodePen。
要了解如何更改文本的背景颜色，请阅读如何改变文本和背景颜色的CSS。
如何在HTML中更改DIV中的字体
在div中更改字体与段落或span元素中的字体不满。< / p >
一种在HTML " div "只是一个可以将网页分为部分的元素，以便您可以使用唯一的CSS属性定位它们。
如果您想在页面上更改文本的字体类型，大小和颜色，则可以将其包装在div标签中，并使用CSS选择器来样式该元素。让我们来看看一个例子：
CSS:
#{例子< / p >
字体 - 家庭：arial;< / p >
字体大小：20px;< / p >
颜色：＃ff7a59;< / p >
}< / p >
HTML:
如何在HTML中改变Div字体[内部CSS]
< / p >
这是伪文本。这是更多的虚拟文本。这是较小的文本。这是更令人讨厌的文字。这是更多的虚拟文本。这是更多的虚拟文本。这是更多的虚拟文本。这是更令人讨厌的文本。< / p >
解释< / p >
我正在使用Codepen编辑器，因此默认的字体类型，大小和颜色是新罗马，16px和黑色。要更改文本部分的所有这些属性，我可以将文本包装在div中并向元素添加一个id属性。然后，我可以使用ID选择器并在页面的头部部分设置字体家庭，字体大小和字体颜色属性。< / p >
< / p >< / p >
这是结果：
看笔如何在HTML中改变Div的字体[内部CSS]由克里斯蒂娜百科（@hubspot.） 上CodePen。
用HTML和CSS改变字体
和一些基本的网页设计知识，您可以更改字体的类型、大小和颜色。这可以让你定制网站上的每个细节，使你的内容更具可读性。如果您正在使用Bootstrap框架进行构建，请查看更多可以使用的方法覆盖Bootstrap CSS中的默认设置创建一个真正唯一的网站。< / p >
编者注：这篇文章最初于2020年7月发表，并已更新全面。

                
                  新的呼叫动作
                

               

                
                
                
                  css的介绍
                
               

              
最初发布4月16日，2021年7:00:00，Updationed 4月16日2021年< / p >

               
话题：< / p >Bootstrap＆CSS