🌰高级CSS的相关运用——自定义字体@font-face🌿

盏灯
3,248 阅读4分钟

CSS自定义字体是指可以通过添加自定义字体文件以实现使用网站上不同字体的能力。

总览

在本文中，我将详细介绍:

  • 下载字体包的网站、
  • 如何使用@font-face规则来加载自定义字体
  • 如何在不同浏览器中适配字体
  • 关于CSS自定义字体的相关知识。

准备工作 -> 下载字体包的网站

在使用自定义字体之前，需要先下载字体包。以下是一些常用的字体包下载网站：

  1. Google Fonts：这是一个免费的字体库，包含数百种字体，可以直接下载或通过CDN引入。

  2. Font Squirrel：这是另一个免费的字体库，提供字体包的下载和转换工具。

  3. Adobe Fonts：这是一个收费的字体库，提供高质量的字体和广泛的字体选择。

如何使用@font-face规则来加载自定义字体

一旦你下载了所需的字体包，就可以使用@font-face规则将其引入到网站中。以下是一个基本的@font-face规则的示例：

@font-face {
  font-family: 'CustomFont';
  src: url('path/to/font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

在这个例子中，我们将字体文件命名为'CustomFont'(可以不用引号)，并将其路径设置为'path/to/font.ttf'。

我们还指定了字体的格式format('truetype')，以便浏览器能够正确地加载字体。

最后，我们设置字体的字重和样式。

一旦我们定义了自定义字体，就可以将其应用于CSS样式中。例如，以下样式将字体应用于页面中的所有段落：

p {
  font-family: 'CustomFont', sans-serif;
}

在这个例子中，我们将字体应用于所有段落，并使用备用字体作为回退选项。

🌰 例子

<body>
  <div class="title">你好吗</div>

  <style>
    @font-face {
      font-family: 'custom';
      src: url('./static/xxx.ttf') format('truetype');
    }
    .title {
      font-family: 'custom';
      font-size: 100px;
    }
  </style>
</body>

疑问：去上面👆三个字体网站下载下来的，怎么不生效

image.png

上面三个网站是英文字体的。中文字体包的下载网站有以下:

比如说我看到造字工房这个字体非常适合夏天的感觉，下下来，换链接试试效果。

image.png

image.png

完毕，回头可以用来写信，或者写一些比较有创意的网站都可以。

如何适配不同浏览器

为了确保自定义字体在不同浏览器中的适配性，我们需要提供不同格式的字体文件。以下是一些常用的字体文件格式：

  1. TrueType（.ttf）：这是一种跨平台的字体格式，可在大多数操作系统和浏览器中使用。

  2. OpenType（.otf）：这是一种更新的字体格式，支持更多的字形和特性。

  3. Web Open Font Format（.woff）：这是一种专门为Web设计的字体格式，具有更好的压缩性能。

  4. Embedded OpenType（.eot）：这是一种专门为Internet Explorer设计的字体格式。

为了确保自定义字体在各种浏览器中都能正常工作，我们需要提供多种字体格式。以下是一个完整的@font-face规则，包括多种字体格式：

@font-face {
  font-family: 'CustomFont';
  src: url('path/to/font.eot');
  src: url('path/to/font.eot?#iefix') format('embedded-opentype'),
       url('path/to/font.woff2') format('woff2'),
       url('path/to/font.woff') format('woff'),
       url('path/to/font.ttf') format('truetype'),
       url('path/to/font.svg#CustomFont') format('svg');
  font-weight: normal;
  font-style: normal;
}

在这个例子中，我们提供了多个字体格式，包括Embedded OpenType、Web Open Font Format、TrueType、SVG等。这样可以确保在各种浏览器中都能正确地加载自定义字体。

番外篇 -> 关于CSS自定义字体的相关知识

除了上述内容，以下是一些关于CSS自定义字体的其他相关知识：

  1. 字体优化：为了提高字体的可读性和性能，可以使用字体优化技术，例如字体子集化、压缩和缓存等。

  2. 字体权重：字体权重指定字体的粗细程度。常用的字体权重包括normal、bold、lighter和bolder等。

  3. 斜体字体：通过设置font-style属性，可以将字体设置为斜体。常用的值包括normal、italic和oblique等。

  4. 字体大小：通过设置font-size属性，可以调整字体的大小。常用的单位包括像素（px）、em和rem等。

  5. 字体样式：通过设置font-family属性，可以指定字体的样式。常用的字体样式包括serif、sans-serif、monospace和cursive等。

总结

通过使用自定义字体，可以在网站中使用各种不同的字体，以增强网站的外观和用户体验。

希望能有所帮助。

最好的学习是贡献和输出。

本文正在参加「金石计划」

avatar
文章
阅读
粉丝