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

Question

我正在 Chrome 95 中加载一个 Hello World html 文件，声明的 @font-face 从 Google 字体加载。字体加载正确，我可以在“网络”选项卡中验证这一点，但出于某种原因，我的 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>

Answer 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>

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

Why is Chrome not displaying my @font-face?

html

css

google-chrome

font-face