Chargement d'une police externe par CSS en ligne
Est-il possible de charger une police externe via CSS?
Note: je suis en parlant d'utiliser un fichier CSS externe avec un @font-face définition, mais plutôt quelque chose comme:
<h1 style="font-family:myfont;
src:('http://example.com/font/myfont.tff')">test</h1>
4 réponses
est-il possible de charger une police externe avec CSS en ligne? Pas avec un fichier CSS externe [....].
Oui, vous pouvez base64 encode une police ou des polices comme le montre cet article à partir de Stephen Scaff et les déposer dans un style bloquez votre page pour éviter la requête externe.
Il peut également être possible d'utiliser cette technique dans la façon dont vous décrivez si le navigateur que vous utilisez 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 moderne navigateur supporte WOFF2, de sorte que vous devriez utiliser et seulement ce dans un avenir prévisible. En outre, cette technique permettra d'améliorer vos scores de vitesse de page, mais dégradera la performance dans l'ensemble (même pour les charges de première page), à moins que vous ne soyez qu'en base64-encodant des ressources de page critiques (par exemple des glyphes de la police montrée au-dessus du pli) et charger de manière asynchrone le reste.
pour les Performances de votre meilleur pari est d'utiliser brotli compression et le tuyau de la webfont en bas de la feuille de style HTTP / 2 Server Push.
Vous ne pouvez pas inclure un @font-face règle style attribut (qui est "inline CSS" dans le sens le plus étroit). Par la spécification HTML 4.01, vous ne pouvez pas inclure une telle règle dans le body élément ("CSS" dans un sens plus large, qui inclut style). Mais dans la pratique il est possible.
Dans la pratique, si vous incluez un style élément à l'intérieur de body, il sera traité par les navigateurs comme si elle était dans la syntaxe bon endroit, c'est à dire à l'intérieur de l' head élément. Il travaille même "à l'envers", effectuant des éléments apparaissant avant lui.
vous pouvez même faire cette approche – qui ne devrait être utilisée que si vous ne pouvez pas changer le head – formellement correct comme par HTML5 CR. permetstyle élément au début de n'importe quel élément avec un contenu de flux comme modèle de contenu. Les navigateurs actuels ignorent le scoped l'attribut.
mise à Jour: ce qui suit n'est pas pertinents de plus, depuis le validateur bogue a été corrigé.
Cependant, il y a un bug dans le validateur de balisage W3C et dans le validateur.nu: ils refusent!--2--> au début body. Pour surmonter ce bug, et pour faire valider votre document en plus d'être valide, Vous pouvez utiliser un
<body>
<div>
<style scoped>
/* your @font-face and other CSS rules go here */
</style>
<!-- your document body proper goes here -->
</div>
</body>
Non, pas que je sache. Vous devez déclarer ce genre de choses sur un <style> block ou un fichier CSS externe.
bien que si vous voulez quelque chose comme ça, il est très probable que vous le fassiez mal.
si vous utilisez @font-face, vous devriez pouvoir faire quelque chose comme ceci:
CSS
@font-face {
font-family: 'RalewayThin';
src: url('fonts/raleway_thin-webfont.eot');
src: url('fonts/raleway_thin-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/raleway_thin-webfont.woff') format('woff'),
url('fonts/raleway_thin-webfont.ttf') format('truetype'),
url('fonts/raleway_thin-webfont.svg#RalewayThin') format('svg');
font-weight: normal;
font-style: normal;
}
assurez - vous d'inclure les polices-l'exemple ci-dessus a placé toutes les polices dans un répertoire relatif au fichier css.
HTML
<h1 style="font-family:RalewayThin,Helvetica, sans-serif;">
vous devriez être en mesure de trouver des polices @font-face gratuites sur le web ici.