html的怎么设置字体

在HTML中设置字体是一个简单而直接的过程，它涉及到使用CSS（层叠样式表）来定义网页上文本的外观，通过CSS，我们可以控制字体的类型、大小、颜色以及其他视觉效果，以下是一些基本的步骤和技巧，帮助你在HTML文档中设置字体。

内联样式

最直接的方法是使用内联样式，即直接在HTML元素中通过style属性来设置字体。

<p style="font-family: Arial, sans-serif; font-size: 16px; color: #333333;">
  这里是一段使用了Arial字体，16像素大小和深灰色文本的段落。
</p>

这种方法简单易用，但缺点是样式不能复用，每个元素都需要单独设置。

内部样式表

如果你希望在多个元素中使用相同的字体设置，可以将CSS代码放在<style>标签中，这样整个HTML文档都可以使用这些样式。

<head>
  <style>
    body {
      font-family: 'Times New Roman', serif;
      font-size: 14px;
      color: #666666;
    }
    h1 {
      font-family: 'Arial', sans-serif;
      font-size: 24px;
      color: #000000;
    }
  </style>
</head>

这样，整个文档的默认字体将被设置为Times New Roman，而h1标签的字体将特别设置为Arial。

外部样式表

对于更大的项目，使用外部样式表是更好的选择，你可以创建一个.css文件，并在HTML文档的<head>部分通过<link>标签引入它：

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

然后在styles.css文件中定义字体样式：

body {
  font-family: 'Georgia', serif;
  font-size: 16px;
  color: #333333;
}
h2 {
  font-family: 'Helvetica', sans-serif;
  font-size: 20px;
  color: #444444;
}

这种方法使得样式的管理和维护更加集中和方便。

使用Google字体

Google Fonts提供了大量的免费字体，你可以直接在CSS中引用它们，在Google Fonts网站上选择你想要使用的字体，然后复制提供的链接代码，并将其添加到你的CSS文件或<style>标签中：

<head>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
    }
  </style>
</head>