css中加载字体 css添加字体

在CSS中，我们可以通过@font-face规则来加载自定义字体。这个规则允许我们将自己的字体文件嵌入到网页中，以便在网页上使用这些字体。

我们需要准备好字体文件。常见的字体文件格式有TrueType（.ttf）和OpenType（.otf）。我们可以在网上找到许多免费的字体文件，也可以购买商业字体。

一旦我们准备好了字体文件，我们就可以在CSS中使用@font-face规则来加载字体。这个规则有几个属性需要设置。

我们需要设置字体的名称，可以自定义一个名称来表示这个字体。然后，我们需要指定字体文件的路径。我们可以使用相对路径或绝对路径来指定字体文件的位置。我们需要设置字体文件的格式，以告诉浏览器如何解析字体文件。常见的格式有truetype、opentype、woff和woff2。

下面是一个示例代码，演示如何使用@font-face规则加载字体：

@font-face {
  font-family: 'MyFont';
  src: url('fonts/myfont.ttf') format('truetype');
}
body {
  font-family: 'MyFont', sans-serif;
}

在这个示例中，我们定义了一个名为"MyFont"的字体，它的字体文件位于一个名为"fonts"的文件夹中，文件名为"myfont.ttf"。我们使用format('truetype')来告诉浏览器这是一个TrueType字体文件。

然后，我们将这个字体应用到整个网页的body元素上，通过设置font-family属性为"MyFont"。如果这个字体无法加载或浏览器不支持该字体，将会回退到默认的sans-serif字体。

除了基本的字体文件加载，@font-face还支持其他一些属性，如font-weight和font-style，可以用来指定字体的粗细和样式。这样可以使我们在网页中使用不同的字体变体。

总结一下，通过@font-face规则，我们可以在CSS中加载自定义字体。我们需要准备好字体文件，并使用@font-face规则来定义字体的名称、文件路径和格式。然后，我们可以通过设置font-family属性来应用这个字体到网页元素上。这样，我们就可以在网页上使用自定义字体，为网页增加独特的风格和视觉效果。