前端中如何改变字体

前端中改变字体的方法有：使用CSS进行字体样式定义、使用Google Fonts等外部字体库、通过@font-face引入自定义字体。其中，使用CSS进行字体样式定义是最基础、最常见的方法，通常可以配合其他方法实现更丰富的字体样式。

一、CSS字体样式定义

CSS提供了丰富的属性来控制字体的样式。最常用的属性包括font-family、font-size、font-weight、font-style、line-height等。通过这些属性，可以轻松地改变文本的字体、大小、粗细、样式和行间距。

1.1、font-family

font-family属性用于指定文本的字体系列。它可以接受多个字体名称作为备选项，当浏览器无法显示第一个字体时，会尝试使用下一个字体。

body {
  font-family: 'Arial', 'Helvetica', sans-serif;
}

在上面的示例中，Arial是首选字体，如果用户的系统不支持Arial，则使用Helvetica，如果两者都不支持，则使用默认的无衬线字体（sans-serif）。

1.2、font-size

font-size属性用于设置文本的大小。可以使用绝对单位（如px、pt）或相对单位（如em、rem、%）。

p {
  font-size: 16px;
}

在这个例子中，段落文本的字体大小被设置为16像素。

1.3、font-weight

font-weight属性用于设置文本的粗细。常见的值有normal、bold，以及数字值（100至900）。

h1 {
  font-weight: bold;
}

在此示例中，一级标题的文本被设置为粗体。

1.4、font-style

font-style属性用于设置文本的样式，如斜体（italic）或正常（normal）。

em {
  font-style: italic;
}

在这个例子中，所有的<em>标签中的文本都将显示为斜体。

1.5、line-height

line-height属性用于设置文本行与行之间的间距。可以使用绝对单位或相对单位。

p {
  line-height: 1.5;
}

在此示例中，段落文本的行间距被设置为1.5倍的字体大小。

二、使用Google Fonts等外部字体库

Google Fonts是一个免费的在线字体库，提供了大量的高质量字体，可以方便地在网页中使用。

2.1、引入Google Fonts

首先，需要在HTML文件的<head>部分引入Google Fonts的链接。

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
</head>

2.2、应用Google Fonts

然后，可以在CSS中使用引入的字体。

body {
  font-family: 'Roboto', sans-serif;
}

在这个例子中，Roboto字体被应用于整个文档的文本。

三、通过@font-face引入自定义字体

如果需要使用自定义字体，可以通过@font-face规则引入本地或在线的字体文件。

3.1、定义@font-face

首先，在CSS中定义@font-face规则，指定字体名称和字体文件的路径。

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyCustomFont.woff2') format('woff2'),
       url('fonts/MyCustomFont.woff') format('woff');
}

3.2、应用自定义字体

然后，可以在CSS中使用定义的自定义字体。

h1 {
  font-family: 'MyCustomFont', sans-serif;
}

在这个例子中，自定义字体MyCustomFont被应用于一级标题。

四、字体优化与性能

在使用自定义字体时，优化字体加载和性能非常重要。以下是一些常见的优化方法。

4.1、使用font-display属性

font-display属性可以控制字体的加载行为，常见的值有swap、fallback、optional等。

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyCustomFont.woff2') format('woff2');
  font-display: swap;
}

在这个例子中，font-display: swap确保在自定义字体加载前，文本会使用替代字体显示，加载完成后再替换为自定义字体。

4.2、字体子集化

为减少字体文件的大小，可以只包含需要的字符集。许多字体服务提供了子集化功能，可以定制字体文件。

4.3、预加载字体

可以使用<link rel="preload">标签预加载字体，以提高页面的加载速度。

<link rel="preload" href="fonts/MyCustomFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

通过以上方法，可以有效地改变前端中的字体，并优化字体的加载与性能。不同的方法适用于不同的场景，选择合适的方法可以提升用户体验，并确保网页的美观与一致性。