Chargement d'une police externe via CSS

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

Note: je suis pas parler à l'aide d'un fichier CSS externe, avec un @font-face définition, mais plutôt quelque chose comme ce qui suit:

<h1 style="font-family:myfont;
    src:('http://example.com/font/myfont.tff')">test</h1>
InformationsquelleAutor Randomize | 2012-01-05
  1. 18

    Est-il possible de chargement d'une police externe avec du css? PAS avec un fichier CSS externe [....].

    Oui, vous pouvez base64 encode une police ou des polices comme indiqué dans cet article de Stephen Scaff et les déposer dans un style bloc dans votre page pour éviter de la demande 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 navigateur moderne prend en charge WOFF2, alors vous devriez probablement utiliser que et seulement que pour l'avenir prévisible. Aussi, cette technique permettra d'améliorer votre vitesse de la page des scores, mais va dégrader les performances dans l'ensemble (même pour le premier chargement de la page), sauf si vous êtes seulement en base64 encodage de la page essentielle de l'actif (par exemple, les glyphes de la police affichés au-dessus du pli) et charger de manière asynchrone le reste.

    De Performance de votre meilleur pari est d'utiliser Brotli de compression et le tuyau de la webfont feuille de style vers le bas avec HTTP/2 Server Push.

    • C'est très intéressant! Ma question est vieille de 5 ans et les choses sont peu changé depuis 🙂 je ne suis pas en mesure de vérifier à l'instant, mais je vais supposer que la "solution" à ce jour.
    • c'est encore juste un style en ligne tag pas du css comme son exemple <h1 style="...">
    InformationsquelleAutor Josh Habdas
  2. 10

    Vous ne pouvez pas inclure un @font-face règle dans un style attribut (qui est “CSS” dans le sens le plus étroit). Par la spécification HTML 4.01, vous ne pouvez pas inclure une telle règle à l'intérieur de la body éléments à tous (“CSS” dans un sens plus large, qui inclut style éléments). Mais dans la pratique il est possible.

    Dans la pratique, si vous incluez un style élément à l'intérieur d' body, il sera traité par les navigateurs comme si elle était dans le syntaxiquement correct place, c'est à dire à l'intérieur de la head élément. Cela fonctionne “à l'envers”, effectuant des éléments qui se présentent devant lui.

    Vous pouvez même faire de cette approche – qui devrait être utilisé seulement si vous ne pouvez pas modifier le head – formellement correct comme par HTML5 CR. Il permet un style élément au début de tout élément de contenu de flux comme son modèle de contenu. Les navigateurs actuels ignorer la scoped attribut.

    Mise à jour: ce qui suit n'est pas pertinent, pas plus, depuis le validateur bogue a été corrigé.

    Cependant, il y a un bug dans le Validateur du W3C et de validateur.nu: ils interdire style au début de body. Pour surmonter ce problème, et afin de rendre votre document à valider en plus d'être valide, vous pouvez utiliser un div élément:

    <body>
<div>
<style scoped>
/* your @font-face and other CSS rules go here */
</style>
<!-- your document body proper goes here -->
</div>
</body>
    • Pouvez-vous lier à la partie pertinente de la spécification HTML 4.01 qui interdisent ce (j'aimerais savoir quel autre type de inline css est désactivé)?
    • J'ai ajouté une clarification qui fait référence à style éléments, qui peut être appelé “CSS” dans le sens plus large que le code CSS directement apparaît dans un document HTML, au lieu d'être dans un autre document CSS qui est appelé dans le code HTML. Le HTML 4.01 règle qui n'autorisait pas l' style à l'intérieur de body a pas un seul endroit dans la spec, car elle résulte de la absence de la style élément à partir du contenu du modèle de l'exception que de la head élément.
    • Ok, Merci, actuellement, je suis dans un cas<style scoped></style> et<style></style> est rayé de la web désinfectant, mais je peux mettre n'importe quoi à l'intérieur d'unstyle="" attribut. Aussi, serait-il fonctionner si j'utilise un@importà l'intérieur d'un attribut de style?
    • non, @import ne fonctionne pas à l'intérieur d'un style attribut. Le style valeur de l'attribut ne peut être constituée que de déclarations (nom: valeur), qui sera appliquée à l'élément courant.
    InformationsquelleAutor Jukka K. Korpela
  3. 3

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

    Mais si vous voulez quelque chose de ce genre, il est très probable que vous le faites mal.

    • Though if you want something like this, it's very probable you're doing it wrong.: Que sur l'incorporation d'une police de caractères sur une seule page mediawiki?
    • MediaWiki permet de définir un fichier CSS spécifique IIRC. Je ne l'ai pas utilisé dans un temps très long.
    • Oui, mais ils ne l'autorisent que pour l'ensemble du site. Si vous avez une seule page qui nécessitent une 6mo de police, il sera chargé de toutes les pages du site.
    • Dans ce cas, vous êtes très certainement faire quelque chose mal.
    • Peut-être pas 🙂
    • 6 mo de police O. o êtes-vous de charger la totalité de polices google lib?
    • Non, mais d'élaborer des glyphes nécessitent beaucoup de données (Il y a plusieurs mots différents de cartes sur la page)

    InformationsquelleAutor Madara Uchiha
  4. -4

    Si vous utiliser @font-face, vous devriez être en mesure de 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 de caractères - l'exemple ci-dessus a placé toutes les polices de caractères dans une relative du répertoire du chemin d'accès au fichier css.

    HTML

    <h1 style="font-family:RalewayThin,Helvetica, sans-serif;">

    Vous devriez être capable de trouver gratuit sur le web @font-face polices ici.

    • C'est un peu le point de faire la déclaration à l'intérieur de la style= attribut 😉
    InformationsquelleAutor m4rk