Pourquoi est-Chrome affiche pas mon @font-face?

Question 1

Je suis le chargement d'un Hello World fichier html dans le navigateur Chrome 95, avec une déclaration @font-face chargés à partir de Google fonts. La police est chargé correctement, ce que je peux vérifier dans l'onglet Réseau, mais pour une raison quelconque, mon div est rendu autant de Fois.

Ce que je fais mal?

<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

À partir de Google polices du document, vous devez utiliser <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name"> au lieu d'écrire directement.

Votre <style> des éléments sont en mauvais endroit, il n'y a pas <body> élément dans votre code 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

À partir de Google polices du document, vous devez utiliser <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name"> au lieu d'écrire directement.

Votre <style> des éléments sont en mauvais endroit, il n'y a pas <body> élément dans votre code 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>

Pourquoi est-Chrome affiche pas mon @font-face?

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie