css设置好看的字体 代码示例

CSS可以通过设置字体样式来使网页的字体看起来更加美观。在CSS中，我们可以使用font-family属性来设置字体样式。这个属性可以接受一个或多个字体名称作为值，并按照优先级的顺序来渲染字体。

我们可以使用通用字体名称，比如"serif"、"sans-serif"和"monospace"。这些通用字体名称会根据用户的操作系统和浏览器来选择合适的字体。例如，如果用户的操作系统是Windows，浏览器会选择一种类似于Times New Roman的字体作为默认字体。

示例代码如下所示：

body {
  font-family: serif;
}

在这个示例中，我们将整个页面的字体样式设置为serif。这意味着页面上的所有文本都会使用serif字体进行渲染。

除了通用字体名称，我们还可以使用具体的字体名称来设置字体样式。例如，我们可以使用"Arial"、"Helvetica"或"Verdana"等字体名称。

示例代码如下所示：

h1 {
  font-family: Arial, sans-serif;
}

在这个示例中，我们将h1标题元素的字体样式设置为Arial，如果用户的操作系统不支持Arial字体，浏览器会选择一个类似于Arial的sans-serif字体作为替代。

我们还可以使用网页中已经加载的自定义字体。通过使用@font-face规则，我们可以将自定义字体文件引入到网页中，并使用它们来设置字体样式。

示例代码如下所示：

@font-face {
  font-family: 'CustomFont';
  src: url('customfont.ttf') format('truetype');
}
h2 {
  font-family: 'CustomFont', sans-serif;
}

在这个示例中，我们通过@font-face规则引入了一个名为CustomFont的自定义字体文件，并将其应用于h2标题元素。如果用户的浏览器支持自定义字体文件，那么网页将使用CustomFont字体进行渲染，否则会选择一个类似于CustomFont的sans-serif字体作为替代。

通过设置合适的字体样式，我们可以使网页的字体看起来更加美观和专业。无论是使用通用字体名称、具体字体名称还是自定义字体，都可以根据网页的设计需求来选择合适的字体样式。