web-dev-qa-db-fra.com

Chargement d'une police externe via CSS en ligne

Est-il possible de charger une police externe via CSS en ligne?

Remarque: je pas parle d'utiliser un fichier CSS externe avec un @font-face définition, mais plutôt quelque chose comme ceci:

<h1 style="font-family:myfont;
    src:('http://example.com/font/myfont.tff')">test</h1>
htmlcssfontsinlinefont-face
42
Randomize

Est-il possible de charger une police externe avec css en ligne? PAS avec un fichier CSS externe [....].

Oui, vous pouvez coder en base64 une ou plusieurs polices comme indiqué dans cet article de Stephen Scaff et les déposer dans un bloc style dans votre page pour éviter la demande externe.

Il peut également être possible d'utiliser cette technique de la manière que vous décrivez si le navigateur que vous utilisez la prend en charge.

<style>
  @font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: normal;
    src: local('PT Sans'), local('PTSans-Regular'),
      url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAHowABMAAAAA+OAA) format('woff2');
  }
  @font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: normal;
    src: local('PT Serif'), local('PTSerif-Regular'),
      url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAIQYABMAAAAA/MAA) format('woff2');
  }
</style>

Chaque navigateur moderne prend en charge WOFF2 , vous devriez donc probablement utiliser cela et seulement cela dans un avenir prévisible. En outre, cette technique améliorera vos scores de vitesse de page, mais dégradera les performances dans l'ensemble (même pour les chargements de première page), sauf si vous êtes uniquement en encodage base64 ressources de page critiques (par exemple glyphes de la police montrée au-dessus du pli) et chargement asynchrone le reste.

En termes de performances, votre meilleur pari est d'utiliser compression Brotli et de rediriger la feuille de style de la police Web avec HTTP/2 Server Push .

18
Josh Habdas

Vous ne pouvez pas inclure un @font-face règle dans un attribut style (qui est "CSS en ligne" au sens le plus étroit). Selon la spécification HTML 4.01, vous ne pouvez pas du tout inclure une telle règle à l'intérieur de l'élément body ("CSS ​​en ligne" au sens large, qui comprend style elements) . Mais en pratique c'est possible.

En pratique, si vous incluez un élément style à l'intérieur de body, il sera traité par les navigateurs comme s'il se trouvait à l'emplacement syntaxiquement correct, c'est-à-dire à l'intérieur de l'élément head. Il fonctionne même "à l'envers", effectuant des éléments apparaissant devant lui.

Vous pouvez même rendre cette approche - qui ne doit être utilisée que si vous ne pouvez pas modifier le head - formellement correcte selon HTML5 CR. Il autorise un élément style au début de tout élément avec un contenu de flux comme modèle de contenu. Les navigateurs actuels ignorent l'attribut scoped.

Mise à jour : ce qui suit n'est plus pertinent, car le bug du validateur a été corrigé.

Cependant, il y a bug dans le validateur de balisage W3C et dans validator.nu: ils interdisent style au début de body. Pour surmonter ce bogue et faire valider votre document en plus d'être valide, vous pouvez utiliser un élément supplémentaire div:

<body>
<div>
<style scoped>
/* your @font-face and other CSS rules go here */
</style>
<!-- your document body proper goes here -->
</div>
</body>
10
Jukka K. Korpela

Non, pas que je sache. Vous devrez déclarer ce genre de choses sur un <style> bloc ou un fichier CSS externe.

Mais si vous voulez quelque chose comme ça, il est très probable que vous le faites mal.

3
Madara Uchiha