Accueil Médias sociaux Comment utiliser les polices incorporées pour vos pages Web HTML5 et CSS3 - Les nuls

Comment utiliser les polices incorporées pour vos pages Web HTML5 et CSS3 - Les nuls

Table des matières:

Vidéo: Comment ANIMER du TEXTE dans Adobe PREMIERE PRO 2025

Vidéo: Comment ANIMER du TEXTE dans Adobe PREMIERE PRO 2025
Anonim

Bien qu'un développeur Web HTML5 puisse suggérer n'importe quelle police pour une page Web, les fichiers de police sont traditionnellement un atout client. Si le client n'a pas la police installée, elle ne le verra pas. Heureusement, CSS3 supporte une solution raisonnable pour fournir des polices téléchargeables.

Le style ne fonctionne pas comme la plupart des éléments CSS. Il ne s'applique pas à certaines parties de la page. Au lieu de cela, il définit une nouvelle valeur CSS qui peut être utilisée dans d'autres balisages. Plus précisément, il vous permet de placer un fichier de police sur votre serveur et de définir une famille de polices utilisant cette police.

@ font-face {font-famille: "Miama"; src: url ("Miama otf");}

L'attribut font-family indique le nom que vous allez donner à cette police dans le reste de votre code CSS. Généralement, il est similaire au nom du fichier de police. L'attribut font-family est l'URL du fichier de police actuel tel qu'il se trouve sur le serveur. Une fois qu'une police a été définie, elle peut être utilisée dans un attribut ordinaire du reste de votre code CSS:

h1 {font-family: Miama;}

Voici le code de l'exemple de police personnalisée:

EmbeddedFont @ font-face {font-family: "Miama"; src: url ("Miama otf");} @ font-face {font-famille: "spray"; src: url ("ideoma_SPRAY. otf");} h1 {font-famille: Miama; font-size: 300%;} h2 {font-family: spray;}

Démonstration de police intégrée

Voici une autre police personnalisée

Bien que tous les navigateurs modernes supportent la fonction @ font-face, les types de fichiers varient d'un navigateur à l'autre. Voici les types de polices primaires:

  • TTF: Le format TrueType standard est bien supporté, mais pas par tous les navigateurs. De nombreuses polices open-source sont disponibles dans ce format.

  • OTF: Ceci est similaire à TTF, mais est un standard vraiment ouvert, donc il est préféré par ceux qui sont intéressés par les normes ouvertes. Il est pris en charge par la plupart des navigateurs sauf IE.

  • WOFF: WOFF est un format standard proposé actuellement pris en charge par Firefox. Microsoft a laissé entendre à soutenir ce format dans IE.

  • EOT: Ceci est le format de police intégré de Microsoft. Cela fonctionne seulement dans IE, mais pour être juste, Microsoft a eu le support intégré de police pendant beaucoup d'années.

Vous pouvez utiliser un outil de conversion de polices tel que onlinefontconverter. com / pour convertir n'importe quel format de police que vous préférez.

Il est possible de fournir plusieurs attributs src. De cette façon, vous pouvez inclure à la fois une version EOT et une version OTF d'une police afin qu'elle fonctionne sur une grande variété de navigateurs.

Lorsque vous utilisez cette technique, vous devez avoir une copie du fichier de police localement.Il devrait être dans le même répertoire que votre page Web. Lorsque vous commencez à héberger sur un serveur Web, vous devez déplacer votre fichier de police sur le serveur avec toutes les autres ressources dont votre page Web a besoin. Juste parce que vous pouvez inclure une police ne signifie pas que vous devriez. Réfléchissez bien à la lisibilité.

Aussi, soyez respectueux de la propriété intellectuelle. Heureusement, il existe de nombreuses polices gratuites d'open-source disponibles. Commencez par regarder la bibliothèque de polices ouverte. Google Fonts est une autre excellente ressource pour les polices gratuites. Avec l'outil Google Font, vous pouvez sélectionner une police intégrée sur les serveurs de Google, et vous pouvez copier le code qui rend la police disponible sans téléchargement.

Comment utiliser les polices incorporées pour vos pages Web HTML5 et CSS3 - Les nuls

Le choix des éditeurs

Comment détecter les atteintes à la sécurité sur vos fichiers journaux Web hébergés - dummies

Comment détecter les atteintes à la sécurité sur vos fichiers journaux Web hébergés - dummies

Grande question est toujours sur la sécurité. Comment pouvez-vous repérer les failles de sécurité hébergées sur le Web pour protéger votre site et garantir qu'il ne sera pas piraté? La réponse courte est la suivante: Vous ne pouvez pas. Tout est piratable avec suffisamment de temps, des cerveaux sournois et des ressources. Cependant, il y a des choses que vous pouvez faire pour vous protéger un peu. ...

Comment utiliser MySQL Workbench pour votre site Web - dummies

Comment utiliser MySQL Workbench pour votre site Web - dummies

Bien que phpMyAdmin et d'autres outils d'hébergement Web Pour gérer les bases de données, il est possible que vous ayez besoin de quelque chose de plus puissant. MySQL Workbench est une bonne source dans cette instance. MySQL Workbench est un outil de conception et d'administration de base de données gratuit créé par Oracle qui réunit deux produits: MySQL Query Browser et MySQL ...

Le choix des éditeurs

Comment mettre du texte sur un cercle dans QuarkXPress - texte fictif

Comment mettre du texte sur un cercle dans QuarkXPress - texte fictif

Sur un cercle - c'est-à-dire texte suivant l'extérieur d'un cercle ou ovale - est un élément de conception commun dans les mises en page. C'est vraiment facile à faire dans QuarkXPress, mais ce n'est pas du tout évident comment. Procédez comme suit: Obtenez l'outil Ovale de la palette Outils et dessinez ...

ÉChanges peer-to-peer par rapport aux échanges Bitcoin réguliers - mannequins

ÉChanges peer-to-peer par rapport aux échanges Bitcoin réguliers - mannequins

Deux types d'échanges de bitcoins sont utilisés : peer-to-peer et régulier. D'une part, il y a les échanges de bitcoins réguliers, qui utilisent un carnet de commandes pour faire correspondre les ordres d'achat et de vente entre les personnes. Cependant, ni l'acheteur ni le vendeur n'ont la moindre idée de l'identité de l'autre partie, ce qui permet à tous les utilisateurs ...

L'interface d'application QuarkXPress - les nuls

L'interface d'application QuarkXPress - les nuls

Les palettes visibles à gauche, à droite et en bas de QuarkXPress sont flottantes - vous pouvez les faire glisser n'importe où qui vous convient. Contrairement aux palettes, les menus de la barre de menu sont collés: vous devez toujours passer la souris à la barre de menu pour y accéder. Cependant, ...

Le choix des éditeurs

Sept erreurs d'optimisation de moteur de recherche - nuls

Sept erreurs d'optimisation de moteur de recherche - nuls

Lorsque vous essayez d'obtenir votre site Web, c'est facile de faire des erreurs d'optimisation de moteur de recherche. Voici quelques-unes des erreurs de référencement les plus courantes. Vous ne connaissez pas vos mots-clés C'est également un problème majeur: la grande majorité des sites sont créés sans que les propriétaires ou les développeurs du site ne sachent vraiment ce que sont les mots-clés ...

Soumission de pages aux moteurs de recherche pour l'optimisation - dummies

Soumission de pages aux moteurs de recherche pour l'optimisation - dummies

Vous avez probablement vu "soumission "Services annoncés pour le référencement, peut-être sous la forme de spam dans votre boîte de réception, offrant de soumettre votre site Web à des centaines de moteurs de recherche, encore et encore. Dans la plupart des cas, ces services de soumission sont une perte totale de temps et d'argent. Voici comment obtenir votre site Web dans les moteurs de recherche. You ...

Six mythes À propos de Search Engine Optimization - mannequins

Six mythes À propos de Search Engine Optimization - mannequins

Il existe une grande confusion dans le monde des moteurs de recherche. beaucoup de mythes. Voici quelques-uns des mythes communément crus qui peuvent nuire à vos positions de moteur de recherche. Tout est une question de métabalises et de soumissions. C'est le mythe le plus répandu et le plus préjudiciable de tous, tenu par de nombreux concepteurs et développeurs Web. ...