CSS 如何确定使用的不仅是字体系列而是字体文件

在本文中，我们将介绍如何利用CSS确定当前页面使用的字体文件，而不仅仅是字体系列。在开发网页时，准确确定当前字体文件非常重要，尤其是对于包含多种字体文件的字体系列。下面将介绍两种方法来实现这一目标。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用CSS的font-display属性

CSS的font-display属性可以设置字体的加载行为，并提供了对于字体是否成功加载的反馈。其中，font-display属性有以下几个可选值：

auto：浏览器使用默认行为加载字体，一般情况下会优先显示fallback字体。
block：字体文件无法加载时，使用和fallback字体相同的样式展示，直到字体文件加载完成。
swap：字体文件无法加载时，立即使用和fallback字体相同的样式展示，直到字体文件加载完成。
fallback：字体文件无法加载时，使用和fallback字体相同的样式展示，只有当字体文件加载完成后，才切换到使用字体文件。
optional：字体文件无法加载时，直接使用和fallback字体相同的样式展示。

以下是一个使用font-display属性的示例：

@font-face {
  font-family: "My Custom Font";
  src: url("my-custom-font.woff2") format("woff2"),
       url("my-custom-font.ttf") format("truetype");
  font-display: swap;
}

h1 {
  font-family: "My Custom Font", Arial, sans-serif;
}

在这个示例中，我们定义了一个名为”My Custom Font”的字体文件，同时指定了多个字体文件的路径和格式。通过将font-display属性设置为swap，如果字体文件无法加载，将立即使用fallback字体（Arial, sans-serif），直到字体文件加载完成。

使用JavaScript获取已加载的字体文件

除了CSS的font-display属性，我们还可以使用JavaScript获取当前已加载的字体文件。通过document.fonts属性，我们可以获取一个FontFaceSet对象，其中包含当前页面上已加载的字体文件。

以下是一个使用JavaScript获取已加载字体文件的示例：

// 获取FontFaceSet对象
var fontSet = document.fonts;

// 遍历已加载的字体文件
fontSet.forEach(function(font) {
  console.log(font.family, font.style, font.weight, font.src);
});

在这个示例中，我们首先使用document.fonts获取当前网页上已加载的字体文件集合。然后，使用forEach方法对集合进行遍历，打印出每个字体文件的字体系列、样式、粗细和路径。

总结

本文介绍了如何利用CSS的font-display属性和JavaScript的document.fonts来确定页面上使用的字体文件。使用font-display属性，我们可以定义字体的加载行为，确保页面在字体文件无法加载时有良好的展示效果。而使用JavaScript获取已加载的字体文件，则可以进一步检查当前页面上使用的具体字体文件，方便我们进行调试和优化。

无论是CSS的font-display属性还是JavaScript的document.fonts，它们都为我们提供了更准确地获取字体文件信息的方式，帮助我们改善网页的字体显示效果。通过灵活地应用这些技术，我们可以为用户提供更好的字体体验。