在HTML4时代，有一个<font> 标签，你可以用来改变文本的字体大小、字体家族和颜色。
但在HTML5中，<font> 标签已被弃用。因此，如果你想改变任何与字体有关的东西，你必须用CSS来做。
在这篇文章中，我将向你展示如何使用CSS来改变文本的字体大小、字体重量、字体样式和字体家族。
如何改变文字的字体大小
文本的字体大小代表了该文本的大小。
要改变一些文字的字体大小，你需要使用font-size 属性，然后以像素为单位指定数值（px ）、rem 、或em 。
你可以像这样使用内联CSS来做：
<h1 style="font-size: 4rem">freeCodeCamp</h1>
你也可以在嵌入式或内部CSS中这样做：
<style>
h1 {
font-size: 4rem;
}
</style>
最后，你可以在外部CSS中做到这一点：
h1 {
font-size: 4rem;
}
为了摆脱默认的白色背景，并使文本在水平和垂直方向上居中，我写了这个CSS：
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f1f1f1;
}
在浏览器中，它看起来如下所示:
如何改变文本的字体重量
字体重量是帮助设置特定文本的粗细程度的属性。
你可以使用font-weight 来改变文字的轻重，然后给它一个值，如normal,lighter,bold, 或bolder 。你也可以使用100、200、500等值。
就像字体大小一样，你可以在内联、嵌入或外部CSS中改变字体重量:
<span>
<h1 style="font-weight: lighter">freeCodeCamp Lighter</h1>
<h1 style="font-weight: normal">freeCodeCamp Normal</h1>
<h1 class="bold" style="font-weight: bold">freeCodeCamp Bold</h1>
<h1 style="font-weight: bolder">freeCodeCamp Bolder</h1>
</span>
<style>
.lighter {
font-weight: lighter;
}
.normal {
font-weight: normal;
}
.bold {
font-weight: bold;
}
.bolder {
font-weight: bolder;
}
</style>
.lighter {
font-weight: lighter;
}
.normal {
font-weight: normal;
}
.bold {
font-weight: bold;
}
.bolder {
font-weight: bolder;
}
如何改变文本的字体风格
字体样式是文本的字体变化。这种字体变化可以是normal ，bold ，或italic 。
要改变字体样式，你需要使用字体样式属性，其值为normal,oblique, 或italic 。
Normal是默认的字体风格，所以你不需要指定它，除非你必须覆盖它。
像往常一样，你可以在内联、内部或外部CSS中改变字体样式:
<span>
<h1>freeCodeCamp Normal</h1>
<h1 style="font-style: oblique">freeCodeCamp Oblique</h1>
<h1 style="font-style: italic">freeCodeCamp Italic</h1>
</span>
<style>
.oblique {
font-style: oblique;
}
.italic {
font-style: italic;
}
</style>
.oblique {
font-style: oblique;
}
.italic {
font-style: italic;
}
下面是在浏览器中的输出结果：
如何改变文本的字体家族
一个字体家族代表了一组具有相同设计和排版的字体。
要改变一些文本的字体家族，你需要使用CSSfont-family 属性。
然后，你可以选择用内联CSS、内部CSS或外部CSS来做。
下面的代码片断显示了如何在内联CSS中改变字体家族：
<h1 style="font-family: Verdana, Geneva, Tahoma, sans-serif">
freeCodeCamp
</h1>
You can change the font-family in embedded or internal CSS this way:
```css
<style>
h1 {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
</style>
在一个外部CSS文件中，你可以像这样改变字体家族：
h1 {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
请确保外部CSS与HTML文件相连，否则将无法工作。
Verdana字体家族在谷歌浏览器中看起来是这样的:
你可能已经注意到，值中还有其他字体家族--日内瓦、塔霍马和无衬线。
这些是浏览器在用户的设备上没有Verdana的情况下可以使用的回退。
如果你不喜欢你的设备中内置的字体，你可以从谷歌字体中获得其他字体。
搜索你喜欢的字体并复制它的链接，然后将链接粘贴在你的HTML的<head> 部分，这样你就可以在你的HTML样式表中访问它了
在我的案例中，我使用的是Roboto字体，像这样:
h1 {
font-family: Roboto, sans-serif;
}
这就是它在浏览器中的样子:
结论
本文向你介绍了如何在内联、内部或外部CSS中改变文字的字体大小、字体重量、字体样式和字体家族。
你可能会想，在内联、内部或外部CSS之间，哪种方法最好？
如果你正在做一个小项目，你可以使用内部或嵌入的CSS，但如果你正在做一个大项目或在一个团队中，你不应该使用内部CSS。
这是因为，让你的CSS远离你的HTML是一种最佳做法。
在大多数情况下，内联CSS是一个禁区，因为它可能影响你的HTML的可读性。
还有人认为，内联CSS会对网站的SEO产生负面影响。
谢谢你的阅读。
