为什么 Chrome 不显示我的@font-face？答案

【问题标题】：Why is Chrome not displaying my @font-face?为什么 Chrome 不显示我的@font-face？
【发布时间】：2021-11-23 11:23:17
【问题描述】：

我正在 Chrome 95 中加载一个 Hello World html 文件，其中声明了从 Google 字体加载的 @font-face。字体正在正确加载，我可以在“网络”选项卡中进行验证，但由于某种原因，我的 div 呈现为 Times。

我做错了什么？

<html>
<div style='font-family:OpenSans-Regular;'>
    Hello World!
</div>
</html>
<style>
    @font-face {
      font-family: OpenSans-Regular;
      font-style: normal;
      font-weight: 400;
      font-stretch: 100%;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/opensans/v27/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu0SC55K5gw.woff2) format('woff2');
    }
</style>

【问题讨论】：

标签： html css google-chrome font-face

【解决方案1】：

来自Google fonts document，你应该使用<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">而不是直接写。

您的 <style> 元素位置错误，您的 HTML 中没有 <body> 元素。

<html>
    <head>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">

        <style>
            * {
                font-family: "Open Sans";
            }
        </style>
    </head>
    <body>
        <div style='font-family:Open Sans'>
            Hello World!
        </div>
    </body>
</html>

【讨论】：