ทำไม Chrome ไม่แสดงของฉัน@แบบอักษรหน้า?

Question 1

ฉันกำลังโหลดเป็นสองโลกยังแฟ้ม html ใน Chrome ข 95 หรอก,กับผู้ประกาศ@แบบอักษรหน้าโหลดจากกูเกิ้ลแบบอักษร. แบบอักษรที่เป็นอย่างถูกต้องการโหลด,ซึ่งฉันสามารถตรวจสอบในเครือข่ายบนแท็บแต่ด้วยเหตุผลบางอย่างของฉัน div คือการแสดงผลเป็นครั้งแล้ว

ฉันทำอะไรผิดเหรอ?

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

Question 2

จาก ของกูเกิ้ลแบบอักษรเอกสารคุณควรใช้ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name"> แทนที่จะเขียนพวกเขาโดยตรง

ของคุณ <style> ธาตุอยู่ผิดที่มันไม่มี <body> ธาตุใน HTML ของคุณ.

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

vee · Answer 1 · 2021-11-23T03:23:17

จาก ของกูเกิ้ลแบบอักษรเอกสารคุณควรใช้ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name"> แทนที่จะเขียนพวกเขาโดยตรง

ของคุณ <style> ธาตุอยู่ผิดที่มันไม่มี <body> ธาตุใน HTML ของคุณ.

<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 ไม่แสดงของฉัน@แบบอักษรหน้า?

คำถาม

คำตอบที่ดีที่สุด

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่