Comment changer la police du texte en Css?
Changer la police du texte grâce aux feuilles de style Css
Vous pouvez en feuille de style Css spécifier la police (fonte) d'une portion de texte. Pour cela vous devez utiliser la feuille de style Css font qui permet de spécifier plusieurs autres propriétés comme la taille et la couleur.
font : oblique 14px Arial, Helvetica, sans-serif; font-familyfont-family : "Times New Roman", Times, serif;Voir un exemple de famille de police en Css
Pour préciser la police pour l'ensemble du document, il faut assigner la famille de police au niveau le plus haut de votre structure HTML, soit sur le html ou le body.
html{
font-family : "Times New Roman", Times, serif;
}Importation des polices externes
Vous pouvez en feuille de style Css importer une police spécifique. Pour cela vous devez utiliser la règle de style CSS @font-face qui permet de spécifier l'emplacement des fichiers fontes.
@font-face{
font-family: 'maFonte';
src: url('/img/screenshot_css/breac_webfont.eot');
src: url('/img/screenshot_css/breac_webfont.eot?#iefix') format('embedded-opentype'),
url('/img/screenshot_css/breac_webfont.woff') format('woff'),
url('/img/screenshot_css/breac_webfont.woff2') format('woff2'),
url('/img/screenshot_css/breac_webfont.ttf') format('truetype'),
url('/img/screenshot_css/breac_webfont.svg#breac_webfont') format('svg');
font-stretch : normal;
font-weight : normal;
font-style : normal;
}
p{
font-family : "maFonte", Helvetica, Arial, sans-serif;
}Voir un exemple d'import de police en Css
Certains sites comme Google Web Fonts mettent à disposition des fontes.
Comment changer la taille du texte en Css?
Changer le taille du texte grâce aux feuilles de style Css
Vous pouvez en feuille de style Css spécifier la taille de la police (fonte) d'une portion de texte. Pour cela vous pouvez utiliser la feuille de style Css font qui permet de spécifier en une seule fois plusieurs autres propriétés comme le type de police et la couleur.
font : oblique 14px Arial, Helvetica, sans-serif; font-sizefont-size : 12px;La taille d'une police peut s'exprimer en plusieurs unités.
-
mm, millimètres. -
cm, centimètre. -
px, pixel. -
pt, point. -
%, pourcentage. -
em,rem.
px, cependant cela est déconseillé pour l'accessibilité, il vaut mieux utiliser %, pt, em ou rem. Il faut savoir que
em et % sont des tailles relatives. Elles sont proportionnelles à la police par défaut du navigateur ou de la taille de police héritée du parent.Alors que le
px, cm, mm sont des tailles fixes.Voir un exemple de taille de texte en Css
Pour préciser la taille de la police pour l'ensemble du document, il faut assigner taille de police au niveau le plus haut de votre structure HTML, soit sur le html ou le body. Les balises "titre" comme h1, h2, ... auront une taille proportionnelle à la taille que vous avez spécifiée.
html{
font-size : 16px;
}Comment changer la couleur du texte en CSS?
Changer la couleur du texte grâce aux feuilles de style Css
Vous pouvez en feuille de style Css spécifier la couleur d'une portion de texte. Pour cela vous devez utiliser la feuille de style Css color qui permet de spécifier la couleur de texte.
color : crimson;
color : rgb(255,0,0);
color : hsl(16,100%,50%);
color : #FF00FF;Il est possible en Css de mettre des couleurs avec des alpha. L'alpha va vous permettre de jouer sur l'opacité ou transparence de la couleur. Deux formats de couleurs sont autorisés : le format de couleur Css HSLA et le format de couleur Css RGBA. Vous trouverez plus d'informations dans les cours sur les couleurs en Css.
Voir un exemple de couleur de texte en Css
Pour préciser la couleur du texte pour l'ensemble du document, il faut assigner la couleur au niveau le plus haut de votre structure HTML, soit sur le html ou le body. Cependant, vous devrez spécifier les couleurs pour des divers états des liens qui sont héritées du navigateur.
html{
color : #FF00FF;
}
/* Pour l'exemple je rassemble les états à traiter pour les liens */
a:link, a:visited, a:active, a:focus, a{
color : #FF00FF;
}
Recommandations WCAG 2.0 pour les couleurs
Pour aller plus loin, sachez que pour l'Accessibilité Web vous devez faire en sorte que :
le contraste entre la couleur de son arrière-plan et la couleur d'un texte soit suffisamment grand pour que le texte soit correctement lu par une personne affectée par une perception des couleurs déficiente.
Ces règles sont définies dans les recommandations WCAG 2.0.
Comment changer la couleur du texte sélectionné en CSS?
Changer la couleur du texte sélectionné grâce aux feuilles de style Css
Vous pouvez en feuille de style Css spécifier entre autre la couleur d'une portion de texte sélectionnée. Pour cela vous devez utiliser la feuille de style Css ::selection et qui permet de modifier les propriétés Css du texte sélectionné.
::-moz-selection{
background-color : #295e0f;
color : #fff
}
::selection{
background-color : #295e0f;
color : #fff
}Exemple de changement de couleur d'un texte séléctionnée :
Il est possible en Css de mettre des couleurs avec des alpha. L'alpha va vous permettre de jouer sur l'opacité ou transparence de la couleur. Deux formats de couleurs sont autorisés : le format de couleur Css HSLA et le format de couleur Css RGBA. Vous trouverez plus d'informations dans les cours sur les couleurs en Css.
Voir un exemple de couleur de texte sélectionné en Css